使用Ajax 將資料和檔案上傳組合在一個表單中
在Web 開發中，能夠同時從一個表單提交資料和文件的能力單一形式至關重要。 Ajax 是一種非同步方法，可讓開發人員無縫地實現這一目標。
要了解如何以 Ajax 形式組合資料和檔案上傳，讓我們先研究一下分別處理資料和檔案的傳統方法。
使用 Serialize() 處理資料
jQuery 的 .serialize()方法將表單元素轉換為可以透過 Ajax 請求傳送到伺服器的查詢字串。例如：
$("form#data").submit(function() {
var formData = $(this).serialize();
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
success: function (data) {
alert(data)
}
});
});使用FormData 處理檔案
對於檔案上傳，new FormData($(this)[0]) 建立一個表示表單的FormData 物件資料和文件。以下是範例：
$("form#files").submit(function() {
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
contentType: false,
processData: false
});
});組合資料和檔案
要組合資料和檔案上傳，只需使用FormData 物件並附加所有表單元素，包括檔案輸入。例如，考慮這個表單HTML：
<form>
以及對應的jQuery 和Ajax 程式碼：
$("form#datafiles").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.post($(this).attr("action"), formData, function(data) {
alert(data);
});
});此程式碼將從表單收集資料和檔案並將它們傳送到透過Ajax POST請求向伺服器發送請求。
透過了解處理資料和檔案背後的原理，您可以輕鬆組合這兩種方法來建立健壯的 Ajax 表單，支援複雜資料提交。
以上是如何在單一 Ajax 表單中組合資料和檔案上傳？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
