您的位置:首页 > Web前端 > JQuery

jquery 文件上传插件ajaxfileupload.js 实现多图上传,解决文件上传后表单置空的问题

2018-01-23 16:04 1421 查看
一.实现多张图片上传将代码

var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(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', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}

二,文件上传后会使原来的表单置空,解决方法在jQuery(form).submit();后加上以下代码(该写法兼容ie9)

//防止提交后表单置空
for (var i in s.fileElementId) {
var oldElement = jQuery('#jUploadFile' +id ,form);
var newElement =  jQuery('#'+s.fileElementId[i] );
jQuery(newElement).replaceWith(oldElement);
jQuery(oldElement).attr('id', s.fileElementId[i] );
}


三、调用方法
var param = {
url: 'driver/uploadPhoto',
fileId: self.changeImgFile,//上传的file表单id数组['id1','id2','id3']
data: fileData,//一起上传的其他表单数据{carId:1,type:[1,2,3]}
success: function (e) {
var data = $.parseJSON(e);//后端直接返回json,ie9会直接下载,所以让后端返回的json以字符串格式拼接返回,前端再用$.parseJSON(e)转换,不考虑ie9前后端无需这样处理
if (data.success == 'true') {
...
} else {
...
}
};
fileUpload(param)


// 文件上传
function fileUpload(param) {
fileId = param.fileId ? param.fileId : 'file';
var options = {
contentType: "text/html",//不兼容ie9无需加这句
url: base.baseURL + param.url,
data:param.data,
timeout: 30000,
fileElementId: param.fileId, //file标签的id
dataType: "json", //返回数据的类型
sendAfter:function(){ //执行send方法后的回调(不等respon结果返回)
param.sendAfter ? param.sendAfter():function(){
}
},
success: function (e) {//上传成功回调函数
param.success ? param.success(e) : function () {
};
},
error: function (xhr) {//上传异常回调函数
param.error ? param.error() :  base.notification({type: 'error', message: '上传失败', duration: 3000});
}
};
$.ajaxFileUpload(options);}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: