1、引用文件
先引入jquery与ajaxfileupload插件。注意先后顺序，这个不用说了，所有的插件都是这样。
1
<script></script><script></script>
2、HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
<label>缩略图</label>
<div>
<div>
<div>
<input>
<div>
<span>
<button>选择图片</button>
</span>
<input>
</div>
</div>
</div>
</div>
<div>@@##@@</div>
</div>
3、JS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
$(function(){
$("#btn_thumb").click(function(){
$("#file_thumb").click();
});
//异步上传
$("body").delegate('#file_thumb', 'change', function(){
var filepath = $("input[name='thumb']").val();
var arr = filepath.split('.');
var ext = arr[arr.length-1];
//alert(filepath);exit();
if('gif|jpg|png|bmp'.indexOf(ext)>=0){
$.ajaxFileUpload({
url: '/admin/slide/upload_image',
secureurl: false,
fileElementId: 'file_thumb', //file标签ID
dataType: 'json', //返回数据类型
data:{name:'thumb'},
success:function (data,status){
$("#info_thumb").val(data);
$("#show_thumb").attr('src','/uploads/images/'+data);
$("#info_thumb").focus();
},
complete:function (XMLHttpRequest){
},
error:function (data,status,e){
layer.alert('上传失败!');
},
});
} else {
//清空file
$("#file_thumb").val("");
layer.alert('请上传合适的图片类型!');
}
});
});
</script>
4、后台处理（PHP）
1
2
3
4
5
6
7
8
9
//单文件（包含单文件）异步上传
public function upload_image(){
//图片上传
$file = request()->file(input(name));
$info = $file->move(ROOT_PATH . public/uploads/images);
if($info) {
return json_encode($info->getSaveName());
}
}
5、前台调用
1
2
3
4
5
6
7
8
9
10
<div>
<ul>
{volist name="data" id="vo"}
<li>
<a> @@##@@</a>
<p>{$vo.title}</p>
</li>
{/volist}
</ul>
</div>
以上就是Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输的详细内容，更多请关注php中文网其它相关文章！