如何在 JQuery AJAX 請求中同時傳輸 FormData 和字串資料？

如何透過 JQuery AJAX 發送 FormData 和字串資料？

使用同時包含檔案輸入和隱藏輸入欄位的表單時，您可能會遇到發送兩者的困難使用 FormData() 將資料集組合在一起。本文提供了解決此問題的方法。

在 FormData 中，可以使用 fd.append("file", file_data) 方法追加檔案資料。但是，要將隱藏的輸入資料與檔案一起包含，您需要使用以下步驟：

1. 使用$('form').serializeArray() 取得代表每個物件的物件陣列輸入欄位及其值。
2. 迭代數組並使用 fd.append(input.name,input.value) 將每個欄位的名稱和值附加到 FormData 物件。

例如，考慮HTML 程式碼：

<code class="html"><form action="image.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file[]" multiple="">
  <input type="hidden" name="page_id" value="<?php echo $page_id; ?>"/>
  <input type="hidden" name="category_id" value="<?php echo $item_category->category_id; ?>"/>
  <input type="hidden" name="method" value="upload"/>
  <input type="hidden" name="required[category_id]" value="Category ID"/>
</form></code>

以及以下JQuery/Ajax 程式碼：

<code class="javascript">var fd = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for (var i = 0; i < file_data.length; i++) {
  fd.append("file_" + i, file_data[i]);
}
var other_data = $('form').serializeArray();
$.each(other_data, function (key, input) {
  fd.append(input.name, input.value);
});
$.ajax({
  url: 'test.php',
  data: fd,
  contentType: false,
  processData: false,
  type: 'POST',
  success: function (data) {
    console.log(data);
  },
});</code>

此程式碼首先從輸入獲取檔案並將它們附加到FormData 物件。然後，它使用serializeArray()從隱藏的輸入欄位取得值，並將它們附加到FormData物件。最後，使用 Ajax 請求將資料傳送到伺服器。

按照以下步驟，您可以成功透過 JQuery AJAX 將 FormData 和字串資料一起傳送，確保所有必要的資料都隨請求傳輸。

以上是如何在 JQuery AJAX 請求中同時傳輸 FormData 和字串資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！