如何使用Ajax同時上傳資料和檔案？

使用Ajax 同時上傳資料和檔案

使用Ajax 進行表單提交提供了無縫的使用者體驗，但在嘗試上傳兩者時會出現挑戰資料和文件同時進行。本文針對這個問題，示範如何結合文件上傳和資料收集方法來實現成功的多字段提交。

理解問題

查詢詞幹使用 jQuery 和 Ajax 提交資料和檔案所採用的不同策略。當使用 .serialize() 收集資料時，檔案使用 new FormData($(this)[0])。這些技術的合併允許同時傳輸資料和檔案。

解決方案

解決方案在於正確使用 jQuery 識別碼。透過使用 new FormData(this) 而不是其初始對應項，資料和檔案都可以封裝到 FormData 物件中。然後，該物件將用作 Ajax 請求的資料參數。

示例代碼

以下代碼片段展示了兩種方法的集成：

$("form#data").submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

實施細節

在提供的程式碼中，表單提交時會啟動Ajax 請求，利用FormData物件封裝所有表單欄位和檔案。停用 contentType 和 processData 選項以確保本機 FormData 保持不變。成功回調處理從伺服器收到的回應。

簡化版本

為簡潔起見，以下程式碼提供了解決方案的簡化版本：

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

以上是如何使用Ajax同時上傳資料和檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！