新增 upload 的 `unified` 属性,用于多文件上传时是否一起上传,即只发送一个请求

pull/1287/head
贤心 2023-06-19 17:04:33 +08:00
parent 3c8d20d23d
commit 6b967442ab
1 changed files with 92 additions and 72 deletions

View File

@ -182,78 +182,97 @@ layui.define(['lay','layer'], function(exports){
return files || that.files || that.chooseFiles || elemFile.files; return files || that.files || that.chooseFiles || elemFile.files;
}; };
//高级浏览器处理方式,支持跨域 // 高级浏览器处理方式,支持跨域
var ajaxSend = function(){ var ajaxSend = function(){
var successful = 0; var successful = 0;
var failed = 0 var failed = 0;
var items = getFiles(); var items = getFiles();
var allDone = function(){ // 多文件全部上传完毕的回调
// 多文件全部上传完毕的回调
var allDone = function(){
if(options.multiple && successful + failed === that.fileLength){ if(options.multiple && successful + failed === that.fileLength){
typeof options.allDone === 'function' && options.allDone({ typeof options.allDone === 'function' && options.allDone({
total: that.fileLength total: that.fileLength,
,successful: successful successful: successful,
,failed: failed failed: failed
}); });
} }
}; };
layui.each(items, function(index, file){
// 发送请求
var request = function(sets){
var formData = new FormData(); var formData = new FormData();
//追加额外的参数 // 追加额外的参数
layui.each(options.data, function(key, value){ layui.each(options.data, function(key, value){
value = typeof value === 'function' ? value() : value; value = typeof value === 'function' ? value() : value;
formData.append(key, value); formData.append(key, value);
}); });
//最后添加 file 到表单域 // 添加 file 到表单域
sets.unified ? layui.each(items, function(index, file){
formData.append(options.field, file); formData.append(options.field, file);
}) : formData.append(options.field, sets.file);
//提交文件 // ajax 参数
var opts = { var opts = {
url: options.url url: options.url,
,type: 'post' //统一采用 post 上传 type: 'post', // 统一采用 post 上传
,data: formData data: formData,
,contentType: false contentType: false,
,processData: false processData: false,
,dataType: 'json' dataType: 'json',
,headers: options.headers || {} headers: options.headers || {},
//成功回调 success: function(res){ // 成功回调
,success: function(res){ options.unified ? (successful += that.fileLength) : successful++;
successful++; done(sets.index, res);
done(index, res);
allDone(); allDone();
} },
//异常回调 error: function(e){ // 异常回调
,error: function(e){ options.unified ? (failed += that.fileLength) : failed++;
failed++;
that.msg([ that.msg([
'Upload failed, please try again.', 'Upload failed, please try again.',
'status: '+ (e.status || '') +' - '+ (e.statusText || 'error') 'status: '+ (e.status || '') +' - '+ (e.statusText || 'error')
].join('<br>')); ].join('<br>'));
error(index); error(sets.index);
allDone(); allDone();
} }
}; };
//进度条 // 进度条
if(typeof options.progress === 'function'){ if(typeof options.progress === 'function'){
opts.xhr = function(){ opts.xhr = function(){
var xhr = $.ajaxSettings.xhr(); var xhr = $.ajaxSettings.xhr();
//上传进度 // 上传进度
xhr.upload.addEventListener("progress", function (obj) { xhr.upload.addEventListener("progress", function (obj) {
if(obj.lengthComputable){ if(obj.lengthComputable){
var percent = Math.floor((obj.loaded/obj.total)* 100); //百分比 var percent = Math.floor((obj.loaded/obj.total)* 100); // 百分比
options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , obj, index); options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , obj, sets.index);
} }
}); });
return xhr; return xhr;
} }
} }
$.ajax(opts); $.ajax(opts);
};
// 多文件是否一起上传
if(options.unified){
request({
unified: true,
index: 0
});
} else {
layui.each(items, function(index, file){
request({
index: index,
file: file
});
}); });
} }
};
//低版本 IE 处理方式,不支持跨域 // 低版本 IE 处理方式,不支持跨域
,iframeSend = function(){ var iframeSend = function(){
var iframe = $('#'+ ELEM_IFRAME); var iframe = $('#'+ ELEM_IFRAME);
that.elemFile.parent().submit(); that.elemFile.parent().submit();
@ -275,10 +294,10 @@ layui.define(['lay','layer'], function(exports){
done(0, res); done(0, res);
} }
}, 30); }, 30);
} };
//统一回调 // 统一回调
,done = function(index, res){ var done = function(index, res){
that.elemFile.next('.'+ ELEM_CHOOSE).remove(); that.elemFile.next('.'+ ELEM_CHOOSE).remove();
elemFile.value = ''; elemFile.value = '';
@ -296,74 +315,75 @@ layui.define(['lay','layer'], function(exports){
typeof options.done === 'function' && options.done(res, index || 0, function(files){ typeof options.done === 'function' && options.done(res, index || 0, function(files){
that.upload(files); that.upload(files);
}); });
} };
//统一网络异常回调 // 统一网络异常回调
,error = function(index){ var error = function(index){
if(options.auto){ if(options.auto){
elemFile.value = ''; elemFile.value = '';
} }
typeof options.error === 'function' && options.error(index || 0, function(files){ typeof options.error === 'function' && options.error(index || 0, function(files){
that.upload(files); that.upload(files);
}); });
} };
,exts = options.exts var check;
,check ,value = function(){ var exts = options.exts;
var value = function(){
var arr = []; var arr = [];
layui.each(files || that.chooseFiles, function(i, item){ layui.each(files || that.chooseFiles, function(i, item){
arr.push(item.name); arr.push(item.name);
}); });
return arr; return arr;
}() }();
//回调返回的参数 // 回调函数返回的参数
,args = { var args = {
//预览 // 预览
preview: function(callback){ preview: function(callback){
that.preview(callback); that.preview(callback);
} },
//上传 // 上传
,upload: function(index, file){ upload: function(index, file){
var thisFile = {}; var thisFile = {};
thisFile[index] = file; thisFile[index] = file;
that.upload(thisFile); that.upload(thisFile);
} },
//追加文件到队列 // 追加文件到队列
,pushFile: function(){ pushFile: function(){
that.files = that.files || {}; that.files = that.files || {};
layui.each(that.chooseFiles, function(index, item){ layui.each(that.chooseFiles, function(index, item){
that.files[index] = item; that.files[index] = item;
}); });
return that.files; return that.files;
} },
//重置文件 // 重置文件
,resetFile: function(index, file, filename){ resetFile: function(index, file, filename){
var newFile = new File([file], filename); var newFile = new File([file], filename);
that.files = that.files || {}; that.files = that.files || {};
that.files[index] = newFile; that.files[index] = newFile;
} }
} };
//提交上传 // 提交上传
,send = function(){ var send = function(){
//上传前的回调 - 如果回调函数明确返回false则停止上传(#pulls55) // 上传前的回调 - 如果回调函数明确返回 false则停止上传
if(options.before && (options.before(args) === false)) return; if(options.before && (options.before(args) === false)) return;
//IE兼容处理 // IE兼容处理
if(device.ie){ if(device.ie){
return device.ie > 9 ? ajaxSend() : iframeSend(); return device.ie > 9 ? ajaxSend() : iframeSend();
} }
ajaxSend(); ajaxSend();
} };
//文件类型名称 // 文件类型名称
,typeName = ({ var typeName = ({
file: '文件' file: '文件',
,images: '图片' images: '图片',
,video: '视频' video: '视频',
,audio: '音频' audio: '音频'
})[options.accept] || '文件'; })[options.accept] || '文件';
//校验文件格式 //校验文件格式