这篇文章主要给大家介绍了利用Thinkphp结合ajaxFileUpload实现异步图片传输的方法，文中给出了详细的示例代码，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。

使用Jquery的ajaxFileUpload的图片上传插件，感觉这种异步上传的方式非常好用接下来就介绍一下这个插件的使用。

通过查看插件的源码发现，插件的实现原理大概就是创建一个隐藏的表单和iframe然后用JS去提交，获得返回值。

1、引用文件

先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。

<script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script>

<script src="__ADMIN__/js/ajaxfileupload.js"></script>

2、HTML代码

1. <div class="form-group"> 
2.     <label class="col-sm-2 control-label">缩略图</label> 
3.     <div class="col-sm-8">              
4.         <div id="file-pretty"> 
5.             <div> 
6.                 <input type="file" id="file_thumb" name="thumb" class="form-control" style="display: none;" value=""> 
7.                 <div class="input-append input-group"> 
8.                     <span class="input-group-btn"> 
9.                         <button id="btn_thumb" class="btn btn-white" type="button">选择图片</button> 
10.                     </span> 
11.                     <input id="info_thumb" name="thumb" class="input-large form-control" type="text" value="{$info.img}"> 
12.                 </div> 
13.             </div> 
14.         </div>                      
15.     </div> 
16.     <div class="col-sm-2"><img id="show_thumb" src="/uploads/image/{$info.thumb}" style="height: 30px;" alt=""></div> 
17. </div> 

3、JS代码

1. <script type="text/javascript"> 
2.     $(function(){ 
3.         $("#btn_thumb").click(function(){ 
4.             $("#file_thumb").click(); 
5.         }); 
6.  
7.         //异步上传 
8.         $("body").delegate('#file_thumb', 'change', function(){ 
9.             var filepath = $("input[name='thumb']").val(); 
10.             var arr = filepath.split('.'); 
11.             var ext = arr[arr.length-1]; 
12.             //alert(filepath);exit(); 
13.  
14.             if('gif|jpg|png|bmp'.indexOf(ext)>=0){ 
15.                 $.ajaxFileUpload({ 
16.                   url: '/admin/slide/upload_image', 
17.                   secureurl: false, 
18.                   fileElementId: 'file_thumb', //file标签ID 
19.                   dataType: 'json', //返回数据类型 
20.                   data:{name:'thumb'}, 
21.                   success:function (data,status){ 
22.                       $("#info_thumb").val(data); 
23.                       $("#show_thumb").attr('src','/uploads/images/'+data); 
24.                       $("#info_thumb").focus(); 
25.                   }, 
26.                   complete:function (XMLHttpRequest){ 
27.  
28.                   }, 
29.                   error:function (data,status,e){ 
30.                       layer.alert('上传失败!'); 
31.                   }, 
32.               }); 
33.             } else { 
34.                 //清空file 
35.                 $("#file_thumb").val(""); 
36.                 layer.alert('请上传合适的图片类型!'); 
37.             } 
38.  
39.         }); 
40.     }); 
41. </script> 

4、后台处理（PHP）

1. //单文件（包含单文件）异步上传 
2. public function upload_image(){ 
3.     //图片上传 
4.     $file = request()->file(input('name')); 
5.     $info = $file->move(ROOT_PATH . 'public/uploads/images'); 
6.     if($info) { 
7.         return json_encode($info->getSaveName()); 
8.     } 
9. } 

5、前台调用

1. <div id="slideshow"> 
2.   <ul class="rslides" id="slider"> 
3.     {volist name="data" id="vo"} 
4.     <li><a href="{$vo.url}" rel="external nofollow"  rel="bookmark" target="_blank"> <img src="__UPLOADS__/images/{$vo.img}" max-width="" max-height="" alt="{$vo.title}"></a> 
5.       <p class="slider-caption">{$vo.title}</p> 
6.     </li> 
7.     {/volist} 
8.   </ul> 
9. </div>

Tags: ajaxFileUpload ajax异步图片

分享到：