一.实现多张图片上传将代码
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);}