jQuery插件之ajaxFileUpload [TOC] ## 一、插件介紹 最近在工作中使用了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代碼 ~~~ <div class="form-group"> <label class="col-sm-2 control-label">縮略圖</label> <div class="col-sm-8"> <div id="file-pretty"> <div> <input type="file" id="file_thumb" name="thumb" class="form-control" style="display: none;" value=""> <div class="input-append input-group"> <span class="input-group-btn"> <button id="btn_thumb" class="btn btn-white" type="button">選擇圖片</button> </span> <input id="info_thumb" name="thumb" class="input-large form-control" type="text" value="{$info.img}"> </div> </div> </div> </div> <div class="col-sm-2"><img id="show_thumb" src="/uploads/image/{$info.thumb}" style="height: 30px;" alt=""></div> </div> ~~~ ### 3、JS代碼 ~~~ <script type="text/javascript"> $(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） ~~~ //單文件（包含單文件）異步上傳 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、前臺調用 ~~~ <div id="slideshow"> <ul class="rslides" id="slider"> {volist name="data" id="vo"} <li><a href="{$vo.url}" rel="bookmark" target="_blank"> <img src="__UPLOADS__/images/{$vo.img}" max-width="" max-height="" alt="{$vo.title}"></a> <p class="slider-caption">{$vo.title}</p> </li> {/volist} </ul> </div> ~~~ ## 三、網址參考 jQuery插件之ajaxFileUpload https://www.cnblogs.com/labimeilexin/p/6742647.html ajaxFileUpload上傳文件簡單示例 https://www.cnblogs.com/eleven258/p/8126297.html JQuery的ajaxFileUpload的使用 https://www.cnblogs.com/zhanghaoliang/p/6513964.html 文件上傳----jQuery插件之ajaxFileUpload https://blog.csdn.net/llxinlan/article/details/79047006 jQuery插件之ajaxFileUpload異步上傳 https://www.cnblogs.com/wkrbky/p/6228779.html