thinkphp5+zyFile.js實現的圖片無刷新上傳

thinkphp5+zyFile.js实现的图片无刷新上传
zyFile.js体更了一个很美观的上传页面，同时上传图片无需刷新，也进一步提升了用户体验。我在网上找了好多的无刷新上传的插件，感觉这个还挺不错的，就像大家推荐这一款。
ps : zyFile.js 体供的代码存在一个bug,如果你直接下的网上的代码，把175行:file.name 改为 unescape(encodeURIComponent(file.name ))html页面代码:nbsp;html><br> <br> <br>     <meta> <br>     <title>html5批量上传文件</title> <br>     <!-- 引用控制层插件样式 --><br>     <link> <br>     <script></script><br> <br> <br> <h1 id="html-批量上传文件">html5批量上传文件</h1> <br> <div></div> <br> <script><br />     //上傳的路徑<br />     var url = "{:url('index/upload')}";<br /> </script><br> <!-- 引用核心層外掛 --><br> <script></script><br> <!-- 引用控制層外掛程式 --><br> <script></script><br> <script>    <br /> $(function(){<br />     // 初始化外掛程式<br />     $("#demo").zyUpload({<br />         width            :   "650px",                 height           :   "400px",                   itemWidth        :   "120px",                     itemHeight       :   "100px",                       url              :   url,  // 上傳檔案的路徑<br />         multiple         :   true,                       dragDrop         :   true,                       del              :   true,                   finishDel        :   false,                       /* 外部所獲得的回呼介面 */<br />         onSelect: function(files, allFiles){                                console.info("目前選擇以下檔案：");<br />             console.info(files);<br />             console.info("先前未上傳的檔案：");<br />             console.info(allFiles);<br />         },<br />         onDelete: function(file, surplusFiles){                                console.info("目前刪除了此文件：");<br />             console.info(file);<br />             console.info("目前剩餘的文件：");<br />             console.info(surplusFiles);<br />        },<br />         onSuccess: function(file){                  地             console.info("此檔案上傳成功：");<br />             console.info(file);<br />         },<br />         onFailure: function(file){                  地             console.info("此檔案上傳失敗：");<br />             console.info(file);<br />         },<br />         onComplete: function(responseInfo){           // 所完成的回呼方法上所完成的回呼方法<br />             console.info("檔案已完成");<br />             console.info(responseInfo);<br />         }<br />     });<br /> });<br /> <br /> </script><br> <br> <br> <br>index.php程式碼:<br><?php namespace appindexcontroller; <br> use thinkController;<br> <br> class Index extends Controller<br> {<br>     public function index()<br>     {<br>         return $this->fetch();<br>     }<br> <br>     //處理上傳的主方法<br>     public function upload()<br>     {<br>         $file = request()->file('fileList');<br>         <br>         $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');<br>         if($info){<br>             // 成功上傳後 以取得上傳資訊<br>             // 輸出 jpg<br>             echo $info->getExtension();<br>             // 輸出 42a79759f284b767dfcb2a0197904287.jpg<br>             echo $info->getFilename(); <br>         }else{<br>             // 上傳失敗以擷取錯誤訊息<br>             echo $file->getError();<br>         }<br>         <br>     }<br> }<br>效果如下:<br>

qiniu.rar

( 3.85 MB 下載：2 次 )