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> <br> //アップロードパス<br> var url = "{:url('index/upload')}";<br> スクリプト><br> <!-- リファレンスコアレイヤープラグイン --><br> <br> <!-- 参照制御層プラグイン --><br> <br> $(関数(){<br> // プラグインを初期化します<br> $("#demo").zyUpload({<br> 幅: "650px", // 幅 <br> 高さ : "400px", // 幅<br> itemWidth : "120px", // ファイル item の幅<br>                                                                                                                                           URL、                                                                                                                                                                                                                                                        ragDrop : true, // ファイルをドラッグしてアップロードすることは可能ですか? 真実、 finishDel : false, false, // ファイルアップロード後にプレビューを削除するかどうか <br> /* 外部から取得したコールバック インターフェイス */<br> onSelect: function(files, allFiles){ ; console.info("現在次のファイルが選択されています:");<br> console.info(ファイル);<br> console.info("以前にアップロードされていないファイル:");<br> console.info(allFiles);<br> }、<br> ondelete：function（file、ruxplusfiles）{; console.info("このファイルは現在削除されています:");<br> console.info(ファイル);<br> console.info("現在残っているファイル:");<br> console.info(surplusFiles);<br>}、<br> onSuccess: function(file){ // ファイルのアップロードが成功した場合のコールバック メソッド<br> console.info("このファイルは正常にアップロードされました:");<br> console.info(ファイル);<br> }、<br> onFailure: function(file){ //ファイルアップロード失敗時のコールバックメソッド<br> console.info("このファイルはアップロードできませんでした:");<br> console.info(ファイル);<br> }、<br> onComplete: function(responseInfo){ // アップロード完了のコールバックメソッド<br> console.info("ファイルのアップロードが完了しました");<br> console.info(responseInfo);<br> }<br> });<br> });<br> <br> スクリプト><br> <br> <br> index.php コード:<?php <br /> 名前空間 appindexcontroller;<br> <br> thinkController を使用します;<br> <br> クラスインデックスはコントローラーを拡張します<br> {<br> パブリック関数index()<br> {<br> return $this->fetch();<br> }<br> <br> //アップロード処理のメインメソッド<br> パブリック関数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> // アップロードに失敗し、エラー メッセージが表示されました<br> echo $file->getError();<br> }<br> <br> }<br> }<br>効果は次のとおりです:

qiniu.rar (3.85MBダウンロード：2回)