js插件---IUpload文件上傳插件(包括圖片)


js插件---IUpload文件上傳插件(包括圖片)

一、總結

一句話總結:上傳插件找到真正上傳位置的代碼,這樣就可以知道整個上傳插件的邏輯了,

找資料還是github+官方

 

1、如何在js中找到真正控制上傳的那段代碼?

a、上傳的話首先考慮是不是用的ajax,結果在相關的js里面搜索'ajax'字眼(或者get,post),沒找到

b、根據上面就知道不是用的jquery的ajax,那可能是用的原生的ajax,所以可以搜'XMLHttpRequest'或者'upload'(上傳插件肯定要上傳,上傳的話有極高概率出現upload字眼)

找到upload

    function upload(file) {
        file.stage = 'uploadIng';
        opts.stageChange(file);
        var xhr = createXMLHttpRequest();
        xhr.open('POST', opts.url, true);
        var upload = xhr.upload;
        if (upload) {
            upload.addEventListener('progress', function (e) {
                progress(e, file);
            }, false);
        }
        xhr.addEventListener('readystatechange', function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (!opts.multithreading) {
                    if (queue.length > 1) {
                        queue.shift();
                        loadOk--;
                        upload_(queue[0]);
                    }
                }
                file.responseText = xhr.responseText;
                opts.complete(file);
            }
        }, false);
        var formData = new FormData();
        formData.append('FileData', file);
        xhr.send(formData);
        startTime = new Date().getTime();
    }

    function upload_(file) {
        upload(file);
    }

然后看其它位置出現的upload字眼可以知道哪里調用了這個upload函數來上傳

    function setImageTpl(file, fileReaderiImage, newImage) {
        var data = {};
        data.file = file;
        data.fileReaderiImage = fileReaderiImage;
        data.newImage = newImage;
        data.fileSize = getFileSize(file);
        data.fileType = getFileType(file);
        opts.setImageTpl(data);
        loadOk++;
        if (loadOk == queue.length && !opts.multithreading) {
            upload(queue[0]);
        }
        if (opts.multithreading) {
            upload(data.file);
        }
    }

    function setOtherTpl(file) {
        var data = {};
        data.file = file;
        data.fileSize = getFileSize(file);
        data.fileType = getFileType(file);
        opts.setOtherTpl(data);

        var type = getFileType(file);
        if (opts.Knowntype[type] != undefined && opts.Knowntype[type] != 'undefined') {
            var thisLi = $('#uList li').eq(data.file.index);

            thisLi.find('.image img').attr('src', opts.Knowntype[type]);

        }
        loadOk++;
        if (loadOk == queue.length && !opts.multithreading) {
            upload(queue[0]);
        }
        if (opts.multithreading) {
            upload(file);
        }
    }

發現了setImageTpl和setOtherTpl調用了upload函數

setImageTpl:上傳圖片

setOtherTpl:上傳文件

所以就知道是這兩個函數控制的上傳圖片和文件,所以現在思路就比較清晰了,然后我們在index的js代碼中找到了setImageTpl和setOtherTpl

// 設置圖片類型文件View模板
setImageTpl : function(data) {
    var tpl = opts.tpl('image', 1);
    $('#uList').html($('#uList').html() + tpl);
    var thisLi = $('#uList li').eq(data.file.index);
    thisLi.find('.image img').attr('src', data.fileReaderiImage.target.result);
    thisLi.find('.fileName').text(data.file.name);
    thisLi.find('.imageSize text').text(data.newImage.width + ' X ' + data.newImage.height);
    thisLi.find('.fileSize text').text(data.fileSize);
    thisLi.find('.fileType text').text(data.fileType);
    
},
// 設置其他文件類型View模板
setOtherTpl : function(data) {
    var tpl = opts.tpl('other', 1);
    $('#uList').html($('#uList').html() + tpl);
    var thisLi = $('#uList li').eq(data.file.index);
    thisLi.find('.fileName text').text(data.file.name);
    thisLi.find('.fileSize text').text(data.fileSize);
    thisLi.find('.fileType text').text(data.fileType);
},

所以就知道了整個上傳的邏輯和各個主要函數的功能了,那么這個插件就好用了

 

 

 

二、IUpload文件上傳插件(包括圖片)

百度盤下載地址:

鏈接:https://pan.baidu.com/s/1UAZ9Bt-b0JbUMJtGgmat7A 密碼:6dmc

 

1、截圖

 

 

2、代碼

index.html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>lUpload-Demo</title>
  6     <link rel="stylesheet" href="../assets/css/new.css">
  7     <link rel="stylesheet" href="../assets/css/demo.css">
  8 </head>
  9 <body>
 10 <header>
 11     <nav>
 12     <div id="line">
 13         <span id="title">
 14             lUpload
 15         </span>
 16         <div id="right">
 17             <span></span>
 18         </div>
 19     </div>
 20 
 21     </nav>
 22 </header>
 23 <div id="blueBack">
 24     <span>這是一款多功能的上傳插件</span>
 25 </div>
 26     <div id="center">
 27         <div id="title">
 28         <h1>Demo</h1>
 29             <span>您可以嘗試文件拖拽,使用QQ截屏工具,然后激活窗口后粘貼,或者點擊添加圖片按鈕,來體驗此demo.</span>
 30         </div>
 31         <div id="event">
 32             <div id="dashed">
 33                 <div id="topImg">
 34                     
 35                 </div>
 36                 <div id="middle">
 37                     點擊上傳
 38                     <input type="file" id="selectFile">
 39                     <lable for="selectFile"></lable>
 40                 </div>
 41                 <div id="bottom">
 42                     將文件拖到這里試試?
 43                 </div>
 44             </div>
 45         </div>
 46         <ul id="uList">
 47 <!--             <li>
 48                 <div class="image">
 49                     <img src="./assets/image/aa.jpg" alt="">
 50                 </div>
 51                 <div class="uploadInfo">
 52                     <span class="fileName">文件名稱: <con>ssad</con></span>
 53                     <span class="imageSize">圖片尺寸: <con>ssad</con></span>
 54                     <span class="fileSize">文件大小: <con>ssad</con></span>
 55                     <span class="speed">上傳速度: <con>ssad</con></span>
 56                     <span class="loaded">上傳詳情: <con>zzzz</con></span>
 57                     <span class="stage">
 58                         上傳狀態: <con>ssad</con>
 59                     </span>
 60                     <div class="progress">
 61                         <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 62                             60%
 63                           </div>
 64                     </div>
 65                 </div>
 66             </li>  -->
 67 
 68         </ul>
 69     </div>
 70     <!-- 新 Bootstrap 核心 CSS 文件 -->
 71     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
 72 
 73     <!-- 可選的Bootstrap主題文件(一般不用引入) -->
 74     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
 75 
 76     <!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
 77     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
 78 
 79     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 80     <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 81     <script type="text/javascript" src="../assets/js/lUpload.js"></script>
 82 <script>
 83 // 說明 $('#drop').dropFile為拖拽上傳 $('#drop').pasteFile為粘貼上傳 $('#drop').selectFile 為選擇上傳
 84         // 拖拽上傳
 85     var opts = {
 86         url : './upload.php',
 87         maxfiles: 111 , // 單次上傳的數量
 88         maxfilesize : 11,  // 單個文件允許的大小 (M)
 89         multithreading : true, // true為同時上傳false為隊列上傳
 90         type : [], // 限制上傳的類型
 91         Knowntype : {'other':'./assets/image/other.jpg', 'html':'./assets/image/html.png'}, // 自定義其他文件的縮略圖
 92         tpl : function(type) { // 自定義模板
 93             var imageTpl = '<li>\
 94                 <div class="image">\
 95                     <img src="./assets/image/other.jpg" alt="">\
 96                 </div>\
 97                 <div class="uploadInfo">\
 98                     <span class="fileName">文件名稱: <text>ssad</text></span>\
 99                     <span class="imageSize">圖片尺寸: <text>ssad</text></span>\
100                     <span class="fileSize">文件大小: <text>ssad</text></span>\
101                     <span class="fileType">文件類型: <text>ssad</text></span>\
102                     <span class="speed">上傳速度: <text>ssad</text></span>\
103                     <span class="loaded">上傳詳情: <text>zzzz</text></span>\
104                     <span class="stage">\
105                         上傳狀態: <text>等待上傳</text>\
106                     </span>\
107                     <div class="progress" style="display:none">\
108                         <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" id="progress">\
109                             60%\
110                           </div>\
111                     </div>\
112                 </div>\
113             </li>';
114             var otherTpl = '<li>\
115                 <div class="image">\
116                     <img src="./assets/image/other.jpg" alt="">\
117                 </div>\
118                 <div class="uploadInfo">\
119                     <span class="fileName">文件名稱: <text>ssad</text></span>\
120                     <span class="fileSize">文件大小: <text>ssad</text></span>\
121                     <span class="fileType">文件類型: <text>ssad</text></span>\
122                     <span class="speed">上傳速度: <text>ssad</text></span>\
123                     <span class="loaded">上傳詳情: <text>zzzz</text></span>\
124                     <span class="stage">\
125                         上傳狀態: <text>等待上傳</text>\
126                     </span>\
127                     <div class="progress" style="display:none">\
128                         <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" id="progress">\
129                             60%\
130                           </div>\
131                     </div>\
132                 </div>\
133             </li>';
134             if(type == 'image') {
135                 return imageTpl;
136             } else if(type == 'other') {
137                 return otherTpl;
138             }
139         },
140         // result 結構 {thisDom: 當前被上傳的節點, progress: 進度, speed: "網速", loaded: "已上傳的大小 992 KB"}
141         dynamic : function(result) { // 返回網速及上傳百分比
142             result.thisDom.find('#progress').css('width', result.progress + '%').html(result.progress + '%');
143             result.thisDom.find('.speed').text("網速:" + result.speed + " K\/S")
144             result.thisDom.find('.loaded text').text(result.loaded + ' / ' + result.total)
145 
146         },
147         complete : function(file) { // 上傳完成后調用的
148             var uList = $('#uList li').eq(file.index);
149 
150             uList.find('.stage text').html('上傳完成!');
151 
152             // console.log('第' + file.index + '文件上傳完成!');
153         },
154         // 設置圖片類型文件View模板
155         setImageTpl : function(data) {
156             var tpl = opts.tpl('image', 1);
157             $('#uList').html($('#uList').html() + tpl);
158             var thisLi = $('#uList li').eq(data.file.index);
159             thisLi.find('.image img').attr('src', data.fileReaderiImage.target.result);
160             thisLi.find('.fileName').text(data.file.name);
161             thisLi.find('.imageSize text').text(data.newImage.width + ' X ' + data.newImage.height);
162             thisLi.find('.fileSize text').text(data.fileSize);
163             thisLi.find('.fileType text').text(data.fileType);
164             
165         },
166         // 設置其他文件類型View模板
167         setOtherTpl : function(data) {
168             var tpl = opts.tpl('other', 1);
169             $('#uList').html($('#uList').html() + tpl);
170             var thisLi = $('#uList li').eq(data.file.index);
171             thisLi.find('.fileName text').text(data.file.name);
172             thisLi.find('.fileSize text').text(data.fileSize);
173             thisLi.find('.fileType text').text(data.fileType);
174         },
175         // 上傳狀態改變時觸發
176         stageChange : function(file) {
177             var uList = $('#uList li').eq(file.index);
178             uList.find('.progress').show();
179             uList.find('.stage text').html('正在被上傳');
180             // console.log(file.index + '正在被上傳');
181         } // 當開啟隊列上傳時可以知道那個文件正在被上傳
182 
183     };
184     $('#event').dropFile(opts);    
185     $('#event #selectFile').selectFile(opts);    
186     $('#event').pasteFile(opts);    
187 </script>
188 </body>
189 </html>

 

IUpload.js

  1 /**
  2  * Author : dsphper
  3  * Email : dsphper@gmail.com
  4  * Version : 1.0.1
  5  * Licensed under the MIT license:
  6  *    http://www.opensource.org/licenses/mit-license.php
  7  *    Project home:
  8  *    https://github.com/dsphper/lUpload
  9  */
 10 !(function ($) {
 11     var opts = {},
 12         defaultOpts = {
 13             url: '', // 后台接受地址
 14             maxfiles: 2, // 最大上傳文件數
 15             maxfilesize: 2, // 最大的文件大小
 16             dynamic: function (complete, speed) {
 17             },
 18             error: function (error, file, i) {
 19                 alert(error)
 20             }, // 異常信息接收
 21             multithreading: true, // 是否同時上傳
 22             type: [], // 限制上傳的類型
 23             dragenter: function (e) {
 24                 return false;
 25             },
 26             dragleave: function (e) {
 27                 return false;
 28             },
 29             dragover: function (e) {
 30                 return false;
 31             },
 32             drop: function (e) {
 33                 return false;
 34             },
 35             dropDefa: function (e) {
 36                 return false;
 37             },
 38             enterDefa: function (e) {
 39                 return false;
 40             },
 41             leaveDefa: function (e) {
 42                 return false;
 43             },
 44             overDefa: function (e) {
 45                 return false;
 46             },
 47             tpl: function () {
 48                 return 'false';
 49             },
 50             setImageTpl: function (file, image, img) {
 51             },
 52             setOtherTpl: function (file) {
 53             },
 54             complete: function (file) {
 55             },
 56             stageChange: function (file) {
 57             }, // 當開啟隊列上傳時可以知道那個文件正在被上傳
 58             Knowntype: {'pdf': './image/pdf.jpg', 'html': './image/html.png'},
 59             selectMultiple: true // 允許選擇多個文件
 60         },
 61         errorTexts = ["瀏覽器不支持", "超過最大文件數", "文件大小超過限制", "不允許的上傳格式"],
 62         errorCode = {200: 'warning', 201: 'deadly'}, // warning 普通錯誤 deadly 致命錯誤
 63         uploadImg = [],
 64         uploadTotal = 0, // 本次操作被放入的文件數
 65         fi = 0, // 記錄總共拖入的文件數
 66         thisFile = 0, // 存放當前文件的資源對象
 67         startTime = 0, // 當前文件的上傳開始時間
 68         queue = [], // 用於隊列上傳
 69         loadOk = 0, // 用於記錄當前操作放入的文件被加載成功的數目
 70         time = []; // 用於計算每個文件上傳的平均網速
 71     // 拖拽上傳
 72     $.fn.dropFile = function (userOpts) {
 73         $.event.props.push("dataTransfer");
 74         opts = $.extend({}, defaultOpts, userOpts);
 75         this.bind('dragenter', dragenter).bind('dragleave', dragleave).bind('dragover', dragover).bind('drop', drop);
 76         $(document).bind('drop', dropDefa).bind('dragover', overDefa).bind('dragleave', leaveDefa).bind('dragenter', enterDefa);
 77     }
 78     // 粘貼上傳
 79     $.fn.pasteFile = function (userOpts) {
 80         $.event.props.push("clipboardData");
 81         opts = $.extend({}, defaultOpts, userOpts);
 82         var _this = this;
 83         this.bind('mouseover', function () {
 84             _this.bind('paste', pasteHand);
 85         });
 86         this.bind('mouseout', function () {
 87             _this.unbind('paste', pasteHand);
 88         });
 89 
 90     }
 91     // 選擇上傳
 92     $.fn.selectFile = function (userOpts) {
 93         opts = $.extend({}, defaultOpts, userOpts);
 94         if ($(this).attr('multiple') == undefined && opts.selectMultiple) {
 95             $(this).attr('multiple', 'multiple');
 96         }
 97         $(this).bind('change', function () {
 98             handFiles(this.files)
 99         })
100     }
101     function pasteHand(e) {
102         var clipboard = e.clipboardData;
103         var temp = [];
104         for (var i = 0; i < clipboard.items.length; i++) {
105             temp.push(clipboard.items[i].getAsFile());
106         }
107         ;
108         handFiles(temp);
109         e.preventDefault();
110         e.stopPropagation();
111 
112     }
113 
114     function dragenter(e) {
115         e.dataTransfer.dropEffect = "copy";
116         e.preventDefault();
117         e.stopPropagation();
118 
119     }
120 
121     function dragleave(e) {
122         e.dataTransfer.dropEffect = "copy";
123         e.preventDefault();
124         e.stopPropagation();
125 
126     }
127 
128     function dragover(e) {
129         e.dataTransfer.dropEffect = "copy";
130         e.preventDefault();
131         e.stopPropagation();
132 
133     }
134 
135     function drop(e) {
136         handFiles(e.dataTransfer.files);
137         e.dataTransfer.dropEffect = "copy";
138         e.preventDefault();
139         e.stopPropagation();
140     }
141 
142     function dropDefa(e) {
143         opts.dropDefa(e);
144         e.dataTransfer.dropEffect = "none";
145         e.preventDefault();
146         e.stopPropagation();
147     }
148 
149     function enterDefa(e) {
150         opts.enterDefa(e);
151         e.dataTransfer.dropEffect = "none";
152         e.preventDefault();
153         e.stopPropagation();
154     }
155 
156     function leaveDefa(e) {
157         opts.leaveDefa(e);
158         e.dataTransfer.dropEffect = "none";
159         e.preventDefault();
160         e.stopPropagation();
161     }
162 
163     function overDefa(e) {
164         opts.overDefa(e);
165         e.dataTransfer.dropEffect = "none";
166         e.preventDefault();
167         e.stopPropagation();
168     }
169 
170     function progress(e, file) {
171         if (e.lengthComputable) {
172             //計算網速
173             var nowDate = new Date().getTime();
174             var x = (e.loaded) / 1024;
175             var y = (nowDate - startTime) / 1000;
176             time.push((x / y).toFixed(2));
177             if ((e.loaded / e.total) * 100 == 100) {
178                 var avg = 0;
179                 for (var i = 0; i < time.length; i++) {
180                     avg += parseInt(time[i]);
181                 }
182                 ;
183                 // 求出平均網速
184             }
185             var result = {};
186             result.thisDom = $('#uList li').eq(file.index);
187             result.progress = Math.round((e.loaded / e.total) * 100);
188             result.speed = (x / y).toFixed(2);
189             result.loaded = getFileSize({size: e.loaded});
190             result.total = getFileSize({size: e.total});
191             opts.dynamic(result);
192         } else {
193             alert('無法獲得文件大小')
194         }
195     }
196 
197     function getFileSize(file) {
198         var filesize = file.size;
199         if (filesize >= 1073741824) {
200             filesize = Math.round(filesize / 1073741824 * 100) / 100 + ' GB';
201         } else if (filesize >= 1048576) {
202             filesize = Math.round(filesize / 1048576 * 100) / 100 + ' MB';
203         } else if (filesize >= 1024) {
204             filesize = Math.round(filesize / 1024 * 100) / 100 + ' KB';
205         } else {
206             filesize = filesize + ' Bytes';
207         }
208         return filesize;
209     }
210 
211     function setImageTpl(file, fileReaderiImage, newImage) {
212         var data = {};
213         data.file = file;
214         data.fileReaderiImage = fileReaderiImage;
215         data.newImage = newImage;
216         data.fileSize = getFileSize(file);
217         data.fileType = getFileType(file);
218         opts.setImageTpl(data);
219         loadOk++;
220         if (loadOk == queue.length && !opts.multithreading) {
221             upload(queue[0]);
222         }
223         if (opts.multithreading) {
224             upload(data.file);
225         }
226     }
227 
228     function setOtherTpl(file) {
229         var data = {};
230         data.file = file;
231         data.fileSize = getFileSize(file);
232         data.fileType = getFileType(file);
233         opts.setOtherTpl(data);
234 
235         var type = getFileType(file);
236         if (opts.Knowntype[type] != undefined && opts.Knowntype[type] != 'undefined') {
237             var thisLi = $('#uList li').eq(data.file.index);
238 
239             thisLi.find('.image img').attr('src', opts.Knowntype[type]);
240 
241         }
242         loadOk++;
243         if (loadOk == queue.length && !opts.multithreading) {
244             upload(queue[0]);
245         }
246         if (opts.multithreading) {
247             upload(file);
248         }
249     }
250 
251     function getImageInfo(file, image) {
252         var img = new Image();
253         img.src = image.target.result;
254         img.addEventListener('load', function (e) {
255             setImageTpl(file, image, img);
256         }, false);
257     }
258 
259     function readerFile(file) {
260         var reader = new FileReader();
261         reader.addEventListener('load', function (e) {
262             switchHand(file, e);
263         }, false);
264         reader.readAsDataURL(file);
265     }
266 
267     function filter(file) {
268         var type = !file.type ? 'other' : file.type.split('/')[1];
269         if (type) {
270             var typeIsOk = false;
271             if (opts.type.length > 0) {
272                 for (o in opts.type) {
273                     if (type == opts.type[o]) {
274                         typeIsOk = true;
275                         break;
276                     }
277                 }
278                 if (!typeIsOk) {
279                     opts.error(errorTexts[3], file);
280                     return errorCode['200'];
281                 }
282             }
283 
284         }
285         if (uploadTotal > opts.maxfiles) {
286             opts.error(errorTexts[1], file);
287             return errorCode['201'];
288         }
289         var max_file_size = 1048576 * opts.maxfilesize;
290         if (file.size > max_file_size) {
291             opts.error(errorTexts[2], file);
292             return errorCode['200'];
293         }
294 
295 
296     }
297 
298     function createXMLHttpRequest() {
299         if (window.XMLHttpRequest) {
300             return new XMLHttpRequest();
301         } else {
302             var names = ["msxml", "msxml2", "msxml3", "Microsoft"];
303             for (var i = 0; i < names.length; i++) {
304                 try {
305                     var name = names[i] + ".XMLHTTP";
306                     return new ActiveXObject(name);
307                 } catch (e) {
308                 }
309             }
310         }
311         return null;
312     }
313 
314     function switchHand(file, e) {
315         var type = !file.type ? 'other' : file.type.split('/')[1];
316         if (type == 'jpeg' || type == 'png' || type == 'gif' || type == 'bmp' || type == 'x-icon') {
317             getImageInfo(file, e);
318             return;
319         }
320         setOtherTpl(file);
321         // alert('other');
322     }
323 
324     function upload(file) {
325         file.stage = 'uploadIng';
326         opts.stageChange(file);
327         var xhr = createXMLHttpRequest();
328         xhr.open('POST', opts.url, true);
329         var upload = xhr.upload;
330         if (upload) {
331             upload.addEventListener('progress', function (e) {
332                 progress(e, file);
333             }, false);
334         }
335         xhr.addEventListener('readystatechange', function () {
336             if (xhr.readyState == 4 && xhr.status == 200) {
337                 if (!opts.multithreading) {
338                     if (queue.length > 1) {
339                         queue.shift();
340                         loadOk--;
341                         upload_(queue[0]);
342                     }
343                 }
344                 file.responseText = xhr.responseText;
345                 opts.complete(file);
346             }
347         }, false);
348         var formData = new FormData();
349         formData.append('FileData', file);
350         xhr.send(formData);
351         startTime = new Date().getTime();
352     }
353 
354     function upload_(file) {
355         upload(file);
356     }
357 
358     function handFiles(files) {
359         files = sortFiles(files);
360         uploadTotal = files.length;
361         Array.prototype.push.apply(queue, files);
362         for (var i = 0; i < files.length; i++) {
363             var code = filter(files[i]);
364             if (code == 'deadly') {
365                 return false;
366             } else if (code == 'warning') {
367                 continue;
368             }
369             if (files[i].name == undefined) {
370                 files[i].name = 'null'
371             }
372             files[i].index = fi++;
373             files[i].stage = 'Waiting';
374             readerFile(files[i]);
375             thisFile = files[i];
376         }
377         ;
378     }
379 
380     function sortFiles(files) {
381         var listSize = [];
382         for (var i = 0; i < files.length; i++) {
383             listSize[i] = files[i];
384         }
385         ;
386         for (var i = 0; i < listSize.length; i++) {
387             for (var j = i + 1; j < listSize.length; j++) {
388                 if (listSize[j].size < listSize[i].size) {
389                     var temp = listSize[j];
390                     listSize[j] = listSize[i];
391                     listSize[i] = temp;
392                 }
393             }
394             ;
395         }
396         ;
397 
398         return listSize;
399     }
400 
401     function getFileType(file) {
402         var type = !file.type ? 'other' : file.type.split('/')[1];
403         return type;
404     }
405 })(jQuery)

 

upload.php

 1 <?php
 2 //HTTP上傳文件的開關,默認為ON即是開 
 3 ini_set('file_uploads','ON');
 4 //通過POST、GET以及PUT方式接收數據時間進行限制為90秒 默認值:60 
 5 ini_set('max_input_time','90');
 6 //腳本執行時間就由默認的30秒變為180秒 
 7 ini_set('max_execution_time', '180');
 8 //正在運行的腳本大量使用系統可用內存,上傳圖片給多點,最好比post_max_size大1.5倍 
 9 ini_set('memory_limit','200M');
10 if(!is_dir(dirname(__FILE__) . '/upload')) {
11     mkdir(dirname(__FILE__) . '/upload');
12 }
13 $file_path = dirname(__FILE__) . "/upload/".$_FILES['FileData']['name'];
14 $returnMsg="{status:true}";
15 move_uploaded_file( $_FILES["FileData"]["tmp_name"], $file_path);
16 echo $returnMsg;

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM