layui多文件批量上传问题

layui upload.js原代码

Class.prototype.upload = function (files, type) { var that = this , options = that.config , elemFile = that.elemFile[0] //高级浏览器处理方式,支持跨域 , ajaxSend = function () { var successful = 0, aborted = 0 , items = files || that.files || that.chooseFiles || elemFile.files , allDone = function () { //多文件全部上传完毕的回调 if (options.multiple && successful + aborted === that.fileLength) { typeof options.allDone === 'function' && options.allDone({ total: that.fileLength , successful: successful , aborted: aborted }); } }; layui.each(items, function (index, file) {//每个文件进行一次下面的操作,放入formData里,用通过ajax进入后台中上传处理 var formData = new FormData(); formData.append(options.field, file);//options.field是渲染upload时设置的可上传的类型, accept: 'file',所以这里options.field是一个固定的值

                                  // debugger; //追加额外的参数 layui.each(options.data, function (key, value) { value = typeof value === 'function' ? value() : value; formData.append(key, value); }); //提交文件 var opts = { url: options.url , type: 'post' //统一采用 post 上传 , data: formData //这里传的是formData,后台在request.files里接收 , contentType: false , processData: false , dataType: 'json' , headers: options.headers || {} //成功回调 , success: function (res) { successful++; done(index, res); //res是后台定义的json数据,以前的写法是string json = "{\"code\": 0 ,\"msg\": \"上传成功\",\"data\":\"\" }";

      //所以index对应的都是同一个res(结果),然后进入done()去处理(刚才的说法错了,因为文件在后台也是单独处理的,所以每个文件对应的是不同的json) allDone(); } //异常回调 , error: function () { aborted++; that.msg('请求上传接口出现异常'); error(index); allDone(); } }; //监听进度条 if (typeof options.progress === 'function') { opts.xhr = function () { var xhr = $.ajaxSettings.xhr(); //监听上传进度 xhr.upload.addEventListener("progress", function (e) { if (e.lengthComputable) { //debugger; var percent = Math.floor((e.loaded / e.total) * 100); //百分比 options.progress(percent, options.item[0], e, index); } }); return xhr; } } $.ajax(opts); }); } //低版本IE处理方式,不支持跨域 , iframeSend = function () { var iframe = $('#' + ELEM_IFRAME); that.elemFile.parent().submit(); //获取响应信息 clearInterval(Class.timer); Class.timer = setInterval(function () { var res, iframeBody = iframe.contents().find('body'); try { res = iframeBody.text(); } catch (e) { that.msg('获取上传后的响应信息出现异常'); clearInterval(Class.timer); error(); } if (res) { clearInterval(Class.timer); iframeBody.html(''); done(0, res); } }, 30); } //统一回调 , done = function (index, res) { //每个文件后台处理完后调用done 然后对这个文件判断是否成功以及前台显示之类,(这是没有问题的,啊啊啊,花了一天时间改来改去,原来这个原代码是对的...) that.elemFile.next('.' + ELEM_CHOOSE).remove(); elemFile.value = ''; if (typeof res !== 'object') { try { res = JSON.parse(res); } catch (e) { res = {}; return that.msg('请对上传接口返回有效JSON'); } } typeof options.done === 'function' && options.done(res, index || 0, function (files) { that.upload(files); }); } //统一网络异常回调 , error = function (index) { if (options.auto) { elemFile.value = ''; } typeof options.error === 'function' && options.error(index || 0, function (files) { that.upload(files); }); }

 

posted @ 2021-02-25 16:52  缓缓而已  阅读(2533)  评论(0编辑  收藏  举报