Image upload without refreshing implemented by 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 type="text/javascript"><br /> //Upload path<br /> var url = "{:url('index/upload')}";<br /> </script><br> <!-- Reference core layer plug-in --><br> <script src="/static/upload/core/zyFile.js"></script><br> <!-- Reference control layer plug-in --><br> <script src="/static/upload/control/js/zyUpload.js"></script><br> <script type="text/javascript"> <br /> $(function(){<br /> // Initialize plug-in<br /> $("#demo").zyUpload({<br /> Width: "650px", // width <br /> Height : "400px", // Width <br />                                                                                                                                                                                                                                                      having ’ s having ’ s ’ to having been passed to  --                                                                                                                                                                                                                                                                                                                                 url,                                                                                                                                                                                                                                                        dragDrop : true, // Is it possible to drag and upload files?                                                                                                                                                                                                                                          finishDel : false, false, // Whether to delete the preview after uploading the file <br /> ​​​​/* Externally obtained callback interface */<br />                                                                                                                                                                                                                                                             to console.info("The following files are currently selected:");<br /> console.info(files);<br /> console.info("Files not uploaded before:");<br /> console.info(allFiles);<br />          },<br /> onDelete: function(file, surplusFiles){                                                                                                                                                                                                                                        ; console.info("This file is currently deleted:");<br /> console.info(file);<br /> console.info("Currently remaining files:");<br /> console.info(surplusFiles);<br />         },<br /> onSuccess: function(file){ // Callback method for successful file upload<br /> console.info("This file was uploaded successfully:");<br /> console.info(file);<br />          },<br /> onFailure: function(file){ // Callback method for file upload failure<br /> console.info("This file failed to upload:");<br /> console.info(file);<br />          },<br /> onComplete: function(responseInfo){ // Callback method for upload completion<br /> console.info("File upload completed");<br /> console.info(responseInfo);<br />          }<br /> });<br /> });<br /> <br /> </script><br> <br> <br> index.php code:<?php <br /> namespace appindexcontroller;<br> <br> use thinkController;<br> <br> class Index extends Controller<br> {<br> Public function index()<br> {<br>           return $this->fetch();<br> }<br> <br> //Main method for processing upload<br> Public function upload()<br> {<br>           $file = request()->file('fileList');<br> ​​​​<br> $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');<br>            if($info){<br> // After successful upload, get upload information <br>                        // Output jpg<br> echo $info->getExtension();<br>                         // Output 42a79759f284b767dfcb2a0197904287.jpg<br> echo $info->getFilename(); <br>           }else{<br>                            // Failed to upload and got error message<br> echo $file->getError();<br>          }<br> ​​​​<br> }<br> }The effect is as follows:

qiniu.rar (3.85 MB Download: 2 times)