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 分享