Bild-Upload ohne Aktualisierung implementiert durch 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 /> //Pfad hochladen<br /> var url = "{:url('index/upload')}";<br /> </script><br> <!-- Referenz-Core-Layer-Plug-in --><br> <script src="/static/upload/core/zyFile.js"></script><br> <!-- Referenz-Kontrollschicht-Plug-in --><br> <script src="/static/upload/control/js/zyUpload.js"></script><br> <script type="text/javascript"> $(function(){<br /> // Initialisierungs-Plug-in<br /> $("#demo").zyUpload({<br />                                                                                                                                                                                                      Höhe: „400px“, // Breite <br /> itemWidth: „120px“, // Die Breite des Dateielements <br /> itemHeight: „100px“, // Die Höhe des Dateielements <br />         URL                                                                                                                                                                                                WAHR, DragDrop: true,                // Ist es möglich, Dateien zu ziehen und hochzuladen<br /> DEL: true, // Ob Dateien gelöscht werden können <br /> finishDel: false, false // Ob die Vorschau nach dem Hochladen der Datei gelöscht werden soll <br /> /* Extern erhaltene Rückrufschnittstelle */<br /> onSelect: function(files, allFiles){ //Rückrufmethode zur Auswahl von Dateien<br /> console.info("Die folgenden Dateien sind derzeit ausgewählt:");<br /> console.info(files);<br /> console.info("Dateien, die noch nicht hochgeladen wurden:");<br /> console.info(allFiles);<br />          },<br /> onDelete: function(file, surplusFiles){ // Rückrufmethode zum Löschen einer Datei<br /> console.info("Diese Datei ist derzeit gelöscht:");<br /> console.info(file);<br /> console.info("Derzeit verbleibende Dateien:");<br /> console.info(surplusFiles);<br />         },<br /> onSuccess: function(file){ // Rückrufmethode für erfolgreichen Datei-Upload <br /> console.info("Diese Datei wurde erfolgreich hochgeladen:");<br /> console.info(file);<br />          },<br /> onFailure: function(file){ //Rückrufmethode für Datei-Upload-Fehler<br /> console.info("Diese Datei konnte nicht hochgeladen werden:");<br /> console.info(file);<br />          },<br /> onComplete: function(responseInfo){ // Rückrufmethode für den Abschluss des Uploads<br /> console.info("Datei-Upload abgeschlossen");<br /> console.info(responseInfo);<br />         }<br /> });<br /> });<br /> <br /> </script><br> <br> <br> index.php-Code:<?php <code class="prettyprint linenums lang-php"><?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>     //处理上传的主方法<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> } Namespace appindexcontroller;
Verwenden Sie thinkController;
Klassenindex erweitert Controller

{ Öffentlicher Funktionsindex() {           return $this->fetch();

}

//Hauptmethode zur Verarbeitung des Uploads Öffentliche Funktion upload()

{           $file = request()->file('fileList');                                                 $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');           if($info){ // Nach erfolgreichem Upload Upload-Informationen abrufen                          // JPG ausgeben echo $info->getExtension();                        // Ausgabe 42a79759f284b767dfcb2a0197904287.jpg echo $info->getFilename();           }sonst{                             // Hochladen fehlgeschlagen und Fehlermeldung angezeigt echo $file->getError();         }                                                 } }Der Effekt ist wie folgt: qiniu.rar ( 3,85 MB Download: 2 Mal)