如何在單一 Ajax 表單中組合資料和檔案上傳？

使用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中文網其他相關文章！