JS ajaxfileUpload 一次性上传多个input控件 上传多个文件

本方法适用于一次性上传多个input框输入的文件,如下图所示,任务是需要一次上传两个input框提供的两个文件。

具体方法:

1、修改ajax调用方法

  

  如上图所示,只需要将ajaxFileUpload调用方法中的fileElementId参数写成数组的形式,数组内容就是你需要上传的文件输入框的name属性值

2、更改ajaxfileupload.js插件,插件随便百度一下就能下载到了。

  更改插件的内容有两处:(特此说明,百度上有很多帖子都写了很多类似的方法,但却忽略了下文需要修改的第二处内容,导致上传出错

  1)、找到插件中的 createUploadForm :function(id, fileElementId),然后按照下图指示的方法,修改两个地方,下图的左边是原插件,右边是修改过后的插件。

  图片看起来清晰,为了方便大家,附上修改过后的代码,如下:   

createUploadForm : function(id, fileElementId) {
// create form
var formId = 'jUploadForm' + id[0];
var fileId = 'jUploadFile' + id[0];
var form = jQuery('<form action="" method="POST" name="'
+ formId + '" id="' + formId
+ '" enctype="multipart/form-data"></form>');
if(typeof(fileElementId) == 'string'){
fileElementId = [fileElementId];
}
for(var i in fileElementId){
var oldElement = jQuery('#' + fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', 'jUploadFile' + fileElementId[i]);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}
// set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
},

  2)、需要修改插件的第二处:createUploadIframe方法,修改内容如下图所示:

  

 完成这两大步骤就可以实现ajax一次性上传多个控件的文件了。

转载于:https://www.cnblogs.com/wgl1/p/8275169.html

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页