如何上傳多個包含表單數據的文件？

Question

如何使用多個文件上傳器和文本字段？ 當我刪除文件上傳器時，它正在工作。 如何添加我的文件？

<form id="uploader" enctype="multipart/form-data">
  <input type="file" id="fileInput" /><br /> This is Single File
  <input type="file" id="fileInput1" multiple /><br /> Multipul File
  <b>Eneter Id </b> <input type="text" id="Id" /><br />
  <b>Name</b> <input type="text" id="Name" /><br />
  <input type="button" id="fileButton" value="Upload Files" /><br />
</form>

$(document).ready(function() {
  var apiBaseUrl = "http://localhost:50895/CsgFiles/";

  $("#fileButton").click(function(e) {
    debugger

    var fileform = document.getElementById('fileInput');
    var files = fileform.files;
    var fileform1 = document.getElementById('fileInput1');
    var files1 = fileform1.files;
    var abc = {
      Id: $("#Id").val().trim(),
      Name: $("#Name").val().trim(),
      File2: files,
      File1: files1,
    }

    var data = new FormData(); //From Here Please Help me How can i use
    data.append('File2', files)

    $.ajax({
      url: apiBaseUrl + 'saveFiles',
      type: 'POST',
      dataType: 'json',
      data: data,
      cache: false,
      processData: false,
    }).done(function(data) {
      debugger
    }).fail(function(e) {
      debugger;
    });
  })
})

Answer 1

當您從form的控件上傳所有內容時，構建 FormData object 的最簡單方法是將form的引用提供給構造函數，然后為您完成所有append()邏輯。

另請注意，在處理 forms 時，您應該掛鈎到表單本身的submit事件，而不是單擊提交按鈕。

最后，您還需要在$.ajax調用中包含contentType: false ，以便 jQuery 設置正確的標頭。

說了這么多，試試這個：

jQuery($ => {
  var apiBaseUrl = "http://localhost:50895/CsgFiles/";

  $("#uploader").on('submit', function(e) {
    e.preventDefault();
    var data = new FormData(this);

    $.ajax({
      url: apiBaseUrl + 'saveFiles',
      type: 'POST',
      dataType: 'json',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
    }).done(function(data) {
      debugger;
      console.log(data);
    }).fail(function(e) {
      debugger;
    });
  });
});

我還建議使用相對路徑進行調用，例如： var apiBaseUrl = "/CsgFiles/"; . 這樣，在本地/開發/實時環境之間移動時，代碼仍然可以工作。 它還消除了使用不同協議發生任何跨域事故的可能性。