js插件

2023-02-05 19:03| 来源: 网络整理| 查看: 265

js插件---IUpload文件上传插件（包括图片）一、总结一句话总结：上传插件找到真正上传位置的代码，这样就可以知道整个上传插件的逻辑了，

找资料还是github+官方

1、如何在js中找到真正控制上传的那段代码？

a、上传的话首先考虑是不是用的ajax，结果在相关的js里面搜索'ajax'字眼（或者get，post），没找到

b、根据上面就知道不是用的jquery的ajax，那可能是用的原生的ajax，所以可以搜'XMLHttpRequest'或者'upload'（上传插件肯定要上传，上传的话有极高概率出现upload字眼）

找到upload

然后看其它位置出现的upload字眼可以知道哪里调用了这个upload函数来上传

发现了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 3 4 5 lUpload-Demo 6 7 8 9 10 11 12 13 14 lUpload 15 16 17 18 19 20 21 22 23 24 这是一款多功能的上传插件 25 26 27 28 Demo 29 您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo. 30 31 32 33 34 35 36 37 点击上传 38 39 40 41 42 将文件拖到这里试试? 43 44 45 46 47 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 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 = '\ 94 \ 95 \ 96 \ 97 \ 98 文件名称: ssad\ 99 图片尺寸: ssad\ 100 文件大小: ssad\ 101 文件类型: ssad\ 102 上传速度: ssad\ 103 上传详情: zzzz\ 104 \ 105 上传状态: 等待上传\ 106 \ 107 \ 108 \ 109 60%\ 110 \ 111 \ 112 \ 113 '; 114 var otherTpl = '\ 115 \ 116 \ 117 \ 118 \ 119 文件名称: ssad\ 120 文件大小: ssad\ 121 文件类型: ssad\ 122 上传速度: ssad\ 123 上传详情: zzzz\ 124 \ 125 上传状态: 等待上传\ 126 \ 127 \ 128 \ 129 60%\ 130 \ 131 \ 132 \ 133 '; 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 188 189

IUpload.js

1 /** 2 * Author : dsphper 3 * Email : [email protected] 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

【本文地址】

公司简介

联系我们