归档 标签 友链 关于

jQuery 选择多文件一次上传

html,隐藏 input:

<div>
  <input type="file" id="file1" style="display: none" />
  <input type="file" id="file2" style="display: none" />
  <div class="layui-upload">
    <button type="button" id="file1Btn">选择 Excel 表 1</button>
    <button type="button" id="file2Btn">选择 Excel 表 2</button>
    <button type="button" class="layui-btn" id="startCombine">开始上传</button>
  </div>
</div>

javascript:

var form = new FormData(); // FormData 对象
  function UploadFiles(fileObj1, fileObj2) {
    form.append("file1", fileObj1); // 文件对象
    form.append("file2", fileObj2);
    $.ajax({
      url: "xxx", //url地址
      type: "POST", //上传方式
      data: form, // 上传 formdata 封装的数据
      dataType: "JSON",
      cache: false, // 不缓存
      processData: false, // jQuery 不要去处理发送的数据
      contentType: false, // jQuery 不要去设置 Content-Type 请求头
      success: function(data) {
        //成功回调
        console.log(data);
        alert("上传成功!");
      },
      error: function(data) {
        //失败回调
        alert("上传失败!");
      }
    });
  }

  function checkFileType(e) {
    var file = e.target.files[0]; //js 获取文件对象
    if (file) {
      var file_typename = file.name.substring(file.name.lastIndexOf("."));
      if (file_typename === ".xlsx" || file_typename === ".xls") {
        return file;
      } else {
        alert("选择的文件中包含不支持的格式!");
      }
    }
  }

  var fileObj1, fileObj2;
  $("#file1Btn").click(function() {
    $("#file1").click();
    $("#file1").change(function(e) {
      fileObj1 = checkFileType(e);
    });
  });
  $("#file2Btn").click(function() {
    $("#file2").click();
    $("#file2").change(function(e) {
      fileObj2 = checkFileType(e);
    });
  });
  $("#uploadFilesBtn").click(function() {
    UploadFiles(fileObj1, fileObj2);
  });

· 转载请注明 https://tangkaichuan.cn/jquery-multiple-file-upload/