Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输

1、引用文件

先引入jqueryajaxfileupload插件。注意先后顺序,这个不用说了,所有的插件都是这样。

<script></script><script></script>

2、html代码

<div>     <label>缩略图</label>     <div>                      <div>             <div>                 <input>                 <div>                     <span>                         <button>选择图片</button>                     </span>                     <input>                 </div>             </div>         </div>                          </div>     <div>@@##@@</div> </div>

3、JS代码

    <script> 	    $(function(){ 	        $("#btn_thumb").click(function(){ 	            $("#file_thumb").click(); 	        });  	        //异步上传 	        $("body").delegate(&#39;#file_thumb&#39;, &#39;change&#39;, function(){ 	            var filepath = $("input[name=&#39;thumb&#39;]").val(); 	            var arr = filepath.split(&#39;.&#39;); 	            var ext = arr[arr.length-1]; 	            //alert(filepath);exit();  	            if(&#39;gif|jpg|png|bmp&#39;.indexOf(ext)>=0){ 	                $.ajaxFileUpload({ 	                  url: &#39;/admin/slide/upload_image&#39;, 	                  secureurl: false, 	                  fileElementId: &#39;file_thumb&#39;, //file标签ID 	                  dataType: &#39;json&#39;, //返回数据类型 	                  data:{name:&#39;thumb&#39;}, 	                  success:function (data,status){ 	                      $("#info_thumb").val(data); 	                      $("#show_thumb").attr(&#39;src&#39;,&#39;/uploads/images/&#39;+data); 	                      $("#info_thumb").focus(); 	                  }, 	                  complete:function (XMLHttpRequest){  	                  }, 	                  error:function (data,status,e){ 	                      layer.alert(&#39;上传失败!&#39;); 	                  }, 	              }); 	            } else { 	                //清空file 	                $("#file_thumb").val(""); 	                layer.alert(&#39;请上传合适的图片类型!&#39;); 	            }  	        }); 	    });     </script>

4、后台处理(php

    //单文件(包含单文件)异步上传     public function upload_image(){         //图片上传         $file = request()-&gt;file(input('name'));         $info = $file-&gt;move(ROOT_PATH . 'public/uploads/images');         if($info) {             return json_encode($info-&gt;getSaveName());         }     }

5、前台调用

<div>   <ul>     {volist name="data" id="vo"}     <li> <a> @@##@@</a>       <p>{$vo.title}</p>     </li>     {/volist}   </ul> </div>

Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享