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

使用 Ajax 以一種形式上傳資料和檔案

以一個 Ajax 形式上傳資料和檔案是 Web 應用程式中的常見要求。這裡有關於如何有效完成此任務的詳細說明。

問題

嘗試使用 Ajax 提交資料和檔案可能會很棘手，因為它們的方式由 jQuery 處理不同。 $.serialize() 將資料收集到陣列中，而表單檔案則需要使用 new FormData()。

組合方法

合併這些方法的關鍵正在使用 FormData 物件。 FormData 是一個內建建構函數，可讓您建立表單資料物件。該物件可以保存資料和文件，非常適合我們的目的。

範例

要組合這兩種方法，請使用以下程式碼：

$("form#datafiles").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
    });
});

在這種情況下，#datafiles 表單包含常規資料輸入和文件輸入。 new FormData(this) 行使用表單資料建立一個新的 FormData 物件。

PHP 腳本

在伺服器端處理上傳的資料和文件，使用以下PHP 腳本：

<?php

print_r($_POST);
print_r($_FILES);

?>

使用此程式碼，您可以使用以下方式存取表單資料和上傳的檔案$_POST 和$_FILES 超全域變數。

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