layui 多文件上传Ajax提交数据

问题是这样的:
用户要求可以实现拖拽文件上传,用了Bootstrap-fileinput发现它不兼容ie,那就用layui吧!
我希望用户上传的文件能一次性上传,并把表单数据一起传到后台

layui实现多文件上传时,上传几个文件就会触发几次接口,但我希望它只执行一次,查了很多资料无果。
那就不去触发layui的接口了,那样会导致表单文件被重复提交,
所以我采用了ajax提交表单,formdata打包文件和表单数据,一起传到后台。

文件配置

下面代码都在layui官网上copy的,
这里最重要的一点就是要把files设置为全局变量,这样会相应地更新files

$(function(){
var files; //很重要 设置全局变量 
layui.use('upload', function () {
    var $ = layui.jquery
     , upload = layui.upload;

    //多文件列表示例
    var demoListView = $('#demoList')
    , uploadListIns = upload.render({
        elem: '#testList'
      , url: '/Home/insertTeam' //其实没用到
      , accept: 'file'
      , multiple: true
      , auto: false
      , bindAction: '#upload'//其实也可以不用设置 因为没触发
      , drag: true
      , number: 3
      , exts: 'jpg|png|jpeg|pdf|doc|docx|rar|zip|dwg'
      , before: function (obj) {f
          $('#submit').html('@Resources.validator.submitting');
          $('#submit').attr('disabled', true);
          this.data = $('#teamForm').serializeObject();

      }
       , size: 10240
      , choose: function (obj) {
            files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
          //读取本地文件
          obj.preview(function (index, file, result) {
              var tr = $(['+ index + '">'
                , '' + file.name + ''
                , '' + (file.size / 1024).toFixed(1) + 'kb'
                , '@Resources.MyResources.waiting'
                , ''
                  , ''
                , ''
              , ''].join(''));
              //删除
              tr.find('.demo-delete').on('click', function () {
                  delete files[index]; //删除对应的文件
                  tr.remove();
                  uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
              });
              demoListView.append(tr);
          });
      }
      , done: function (res, index, upload) {
          if (res.code == 0) {
              //上传成功
              alert('@Resources.validator.applySucc');
              window.location.href = "/@ViewContext.RouteData.Values["lang"]/Home/team";
          }
          this.error(index, upload);
          delete this.files[index];
      }
      , error: function (index, upload) {
          var tr = demoListView.find('tr#upload-' + index)
          , tds = tr.children();
          tds.eq(2).html('上传失败');
          tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
      }
    });
});

//提交表单  写在下面


});

ajax提交表单

紧接着上面的,提交表单,表单一定要设置onsubmit="false",取消表单的默认提交,或者不要将button的type设置为submit,我们使用的是ajax提交。这里最重要的就是打包formdata,ajax里的 processData:false,一定得设置,表示不处理数据
layui 多文件上传Ajax提交数据_第1张图片

          let formdata = new FormData;
          for (let i  in files) {//这个files就是全局变量
              formdata.append('file',files[i]);
          }
          formdata.append('customer', 'hello');
          let form=$('#teamForm').serializeObject()
          for (let key in form) {
              formdata.append(key, form[key]);
          }
          $.ajax({
              url: '/Home/insertTeam',
              dataType: 'json',
              type: 'post',
              cache:false,
              contentType: false, 
              processData:false,//必须设置 
              data: formdata,
              success: function (data) {
                  if (String(data) == "true") {
                      alert('@Resources.validator.applySucc');
                      window.location.href = "@ViewContext.RouteData.Values["lang"]/Home/team";
                  } else {
                      alert('@Resources.validator.error')
                  }
              }, error: function () {
                  alert('@Resources.validator.error');
              }
          })

表单序列化

表单序列化的方法在这里

            $.fn.extend({
                serializeObject: function () {
                    var o = {};
                    var a = this.serializeArray();
                    $.each(a, function () {
                        if (this.name != "file") {//排除文件上传
                            if (o[this.name]) {
                                if (!o[this.name].push) {
                                    o[this.name] = [o[this.name]];
                                }
                                o[this.name].push(this.value || '');
                            } else {
                                o[this.name] = this.value || '';
                            }
                        }
                    });
                    return o;
                }
            });

后台接收

    HttpFileCollectionBase files = Request.Files;//上传的文件
    string username = Request["username"]; //表单数据 对应name属性

就这问题也困扰了我很久,唉!

你可能感兴趣的:(ASP.NET,jquery)