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 2 3 4 5lUpload-Demo 6 7 8 9 1011 22 2324 这是一款多功能的上传插件 25262770 71 72 73 74 75 76 77 78 79 80 81 82 188 1892831Demo
29 您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo. 303246334534 353637 点击上传 38 394140 42 将文件拖到这里试试? 434447 67 68
69
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