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 /> //업로드 경로<br /> var url = "{:url('index/upload')}";<br /> </script><br> <!-- 참조 코어 레이어 플러그인 --><br> <script src="/static/upload/core/zyFile.js"></script><br> <!-- 참조 제어 레이어 플러그인 --><br> <script src="/static/upload/control/js/zyUpload.js"></script><br> $(함수(){<br> // 초기화 플러그인<br> $("#demo").zyUpload({<br> ~                                                        : "650px",                                               이후 높이 : "400px", // 너비 <br> itemWidth : "120px", // 파일 항목의 너비 <br> itemHeight : "100px", // 파일 항목의 높이 <br> URL ~ 진실, dragDrop : true,                // 파일을 드래그하여 업로드할 수 있나요<br> DEL: true, // 파일 삭제 가능 여부 <br> FinishDel : false, false / // 파일 업로드 후 미리보기 삭제 여부 <br> ​​​​/* 외부에서 얻은 콜백 인터페이스 */<br> onSelect: function(files, allFiles){ //파일 선택을 위한 콜백 메소드<br> console.info("현재 다음 파일이 선택되었습니다:");<br> console.info(파일);<br> console.info("이전에 업로드되지 않은 파일:");<br> console.info(모든파일);<br>          },<br> onDelete: function(file, surplusFiles){ // 파일 삭제를 위한 콜백 메소드<br> 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 <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> } 네임스페이스 appindexcontroller;
thinkController를 사용하세요.
클래스 인덱스 확장 컨트롤러

{ 공용 함수 인덱스() {           return $this->fetch();

}

//업로드를 처리하는 주요 방법 공개함수 업로드()

{          $file = request()->file('fileList');                                               $info = $file->move(ROOT_PATH . '공개' . DS . '업로드');           if($info){ // 업로드 성공 후 업로드 정보 가져오기                         // jpg 출력 echo $info->getExtension();                       // 출력 42a79759f284b767dfcb2a0197904287.jpg echo $info->getFilename();           }그 외{                            // 업로드 실패 및 오류 메시지 표시 echo $file->getError();         }                                               } }효과는 다음과 같습니다. qiniu.rar ( 3.85MB 다운로드: 2회)