Js上傳多張圖片插件zyupload

時間 2019-11-19

原文原文鏈接

最近作多圖上傳找了好幾個插件都很差用多是我不會用把這個插件仍是不錯的簡單明瞭javascript

上代碼 tp裏面改了下 demo 就能夠用了css

HTML:html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>zyupload拖拽功能上傳實例</title>
       <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.js"></script>
       <link rel="stylesheet" href="__PUBLIC__/plugin/zyupload/skins/zyupload-1.0.0.min.css " type="text/css">
       <script type="text/javascript" src="__PUBLIC__/plugin/zyupload/zyupload.drag-1.0.0.min.js"></script>
   </head>
   <body>
       <h1 style="text-align:center;">zyupload拖拽功能上傳實例</h1>
       <div style="position: absolute;top: 100px; left: 20px;">
           <h3>功能頁面嚮導：</h3>
           <a style="color: #333;line-height: 30px;" href="demo.html">zyupload所有功能</a><br/>
           <a style="color: #333;line-height: 30px;" href="demo.basic.html">zyupload基本功能</a><br/>
           <a style="color: #333;line-height: 30px;" href="demo.tailor.html">zyupload裁剪功能</a><br/>
       </div>
        <div id="zyupload" class="zyupload"></div>
        <div id="uploadInf"></div>
        <div id="img"><img src="/uploads/1234.png" /></div>
        <script type="text/javascript">
           $(function(){
               // 初始化插件
               $("#zyupload").zyUpload({
                   width            :   "650px",                 // 寬度
                   height           :   "400px",                 // 寬度
                   itemWidth        :   "140px",                 // 文件項的寬度
                   itemHeight       :   "115px",                 // 文件項的高度
                   url              :   "upload.html",              // 上傳文件的路徑
                   fileType         :   ["jpg","png","js","exe"],// 上傳文件的類型
                   fileSize         :   51200000,                // 上傳文件的大小
                   multiple         :   true,                    // 是否能夠多個文件上傳
                   dragDrop         :   true,                    // 是否能夠拖動上傳文件
                   tailor           :   false,                    // 是否能夠裁剪圖片
                   del              :   true,                    // 是否能夠刪除文件
                   finishDel        :   false,                    // 是否在上傳文件完成後刪除預覽
                   /* 外部得到的回調接口 */
                   onSelect: function(selectFiles, allFiles){    // 選擇文件的回調方法 selectFile:當前選中的文件 allFiles:還沒上傳的所有文件
                       console.info("當前選擇瞭如下文件：");
                       console.info(selectFiles);
                   },
                   onDelete: function(file, files){              // 刪除一個文件的回調方法 file:當前刪除的文件 files:刪除以後的文件
                       console.info("當前刪除了此文件：");
                       console.info(file.name);
                   },
                   onSuccess: function(file, response){          // 文件上傳成功的回調方法
                       console.info("此文件上傳成功：");
                       console.info(file.name);
                       console.info("此文件上傳到服務器地址：");
                       console.info(response);
                       response = $.parseJSON(response);
                       $("#uploadInf").append(response.msg+"<p>上傳成功，文件地址是：" + response.dir + "</p>");
                       $('#img').append("<img src='"+response.dir+"' />");
                   },
                   onFailure: function(file, response){          // 文件上傳失敗的回調方法
                       console.info("此文件上傳失敗：");
                       console.info(file.name);
                   },
                   onComplete: function(response){                 // 上傳完成的回調方法
                       console.info("文件上傳完成");
                       console.info(response.msg);
                   }
               });

           });

       </script>
   </body>
</html>

上傳到 upload方法裏

PHP:java

public function upload(){
       $uploaddir = 'uploads/';
       $uploadfile = $uploaddir. $_FILES['file']['name'];
       $info=pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
       $dir=$uploaddir .date('YmdHis').rand(1,10000).'.'.$info;
       if (move_uploaded_file($_FILES['file']['tmp_name'],$dir )) {
            /*print "File is valid, and was successfully uploaded. Here's some more debugging info:\n";*/
            $re['dir']='/'.$dir;
            $re['msg']="上傳成功";jquery

　　　　$re['status']=200;
            echo json_encode($re);
       } else {
            /*print "Possible file upload attack! Here's some debugging info:\n";
            print_r($_FILES);*/
            $re['msg']="上傳成功";
            echo json_encode($re);
       }
    }json

上傳到了根目錄的upload文件夾下服務器

補充最最最重要的一點返回值 $re['status']=200; 必須返回個狀態碼這個坑我踩了一天仍是看插件源碼看到的。。。。app

連接：http://pan.baidu.com/s/1slo1mgt 密碼：qf19url

參考：http://www.07net01.com/2015/12/1018133.html插件