js插件---IUpload文件上传插件（包括图片）
2023-12-02 05:11:58
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;转载于:https://www.cnblogs.com/Renyi-Fan/p/9591507.html
js插件---IUpload文件上传插件（包括图片）相关推荐
- layui实现文件压缩上传_基于SSM框架、Layui的多文件上传、包括图片，压缩包，音频等文件（与数据库挂钩） - 爱秧博客...
写在前面:当初为了实现一个多文件上传可是费了一番功夫,经过我日日夜夜的百度咨询,写了好几种方法,最终还是没能解决问题.我可以很负责任的告诉你,你去百度上不管你形容有多好,只要是涉及多文件,就会查到Mu ...
- ajax文件插件上传,7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 具有多文件上传.拖 ...
- ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
- java ajax多文件上传插件_ajaxFileUpload.js插件支持多文件上传的方法
前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): //修改前代码------- //var oldElement = jQuery(' ...
- bootstrap3 文件上传插件fileinput中文说明文档
file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官 ...
- 文件上传插件WebUploader的使用
文件上传插件WebUploader的使用 插件描述: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里 ...
- jquery 文件上传插件_10个jQuery文件上传插件
jquery 文件上传插件 这篇热门文章于2016年7月更新,以反映文件上传插件的当前状态. 有关旧文章的评论已删除. 使用Ajax实施文件上传可能非常困难,特别是如果您需要拖放支持,图像预览或进度条 ...
- fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
- uploadify多文件上传插件
这个插件是兼容IE8及以上版本的,实现了基本功能,底部有下载连接 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti ...
最新文章
- 使用PHP将HTML + CSS转换为PDF？ [关闭]
- Linux下rz，sz
- win32 调试 API 学习总结
- UNIX网络编程读书笔记：辅助数据
- 【译】无限滚动加载最佳实践
- Web框架——Flask系列之模板使用练习（六）
- 苹果打脸！一直号称注重隐私的苹果为监听Siri 录音事件道歉...
- springboot2.0版本后配置拦截器会导致静态资源被拦截
- linux下监控网络连接,Linux网络监控工具--netstat及网络连接分析
- python数据格式化后导入数据库_MySQL导入格式化数据
- Golang并发编程进程通信channel了解及简单使用
- python 列表有没有顺序_python的list有顺序吗
- 线性代数知识荟萃（3）——行列式
- OC门与OD门以及线与逻辑
- 计算机专业线性代数教学大纲,《线性代数》教学大纲
- java面试题怎么背？java面试题有哪些？
- 支付宝618红包怎么领？怎么用?
- 计算机一级windows2000,2012年一级BWindows2000操作系统[2]
- Apple’s ‘Big-A ’ Data Center
- python什么意思v_vpython是什么
热门文章
- Cer Crt Pem Pfx 证书格式转换
- springmvc+spring+mybatis+maven项目集成shiro进行用户权限控制【转】
- oracle安装问题: 11g安装未填写hosts导致弹窗错误
- solrCloud异常
- MapReduce原理与设计思想
- 底板芯片组与内存映射(Motherboard Chipsets and the Memory Map) 【转】
- Ubuntu12.04版本安装arm-linux-gcc 4.3.3
- win7下搭建cocos2d-x androi开发环境不用cygwin的方法
- c# winform 关于给静态全局变量赋值的问题
- Jsp页面中使用fckeditor控件的两种方法