如何使用 JavaScript 上傳帶有 FormData 的文件

FormData 接口可作為 HTML5 Web API 在所有現代瀏覽器中使用。它可用於存儲表示表單字段及其值的鍵值對。

一旦你構造了一個 FormData 對象，可以通過 Fetch API、XMLHttpRequest 或 Axios 輕鬆發送到服務器。

在本文中，您將學習如何使用 FormData 上傳單個或多個文件 在 JavaScript 中。

上傳單個文件

假設您有以下 HTML <input> 元素：

<input type="file" id="avatars">

現在，我們要確保當用戶選擇要上傳的文件時，它會自動發送到服務器進行處理。

以下是您可以用於此目的的示例代碼：

const input = document.querySelector('#avatars');

// Listen for file selection event
input.addEventListener('change', (e) => {
    fileUpload(input.files[0]);
});

// Function that handles file upload using XHR
const fileUpload = (file) => {
    // Create FormData instance
    const fd = new FormData();
    fd.append('avatar', file);

    // Create XHR rquest
    const xhr = new XMLHttpRequest();
    
    // Log HTTP response
    xhr.onload = () => {
        console.log(xhr.response);
    };

    // Send XHR reqeust
    xhr.open('POST', `/upload-avatar`);
    xhr.send(fd);
};

上傳多個文件

FormData 接口也可用於一次上傳多個文件。首先，添加 multiple <input> 的屬性 允許用戶選擇多個文件的元素：

<input type="file" id="avatars" multiple>

接下來修改fileUpload() 方法迭代所有選定的文件，然後添加到 FormData 對象：

const input = document.querySelector('#avatars');

// Listen for file selection event
input.addEventListener('change', (e) => {
    fileUpload(input.files);
});

// Function that handles file upload using XHR
const fileUpload = (files) => {
    // Create FormData instance
    const fd = new FormData();

    // Iterate over all selected files
    Array.from(files).forEach(file => {
        fd.append('avatar', file);
    });

    // Create XHR rquest
    const xhr = new XMLHttpRequest();

    // Log HTTP response
    xhr.onload = () => {
        console.log(xhr.response);
    };

    // Send XHR reqeust
    xhr.open('POST', `/upload-avatar`);
    xhr.send(fd);
};

而已。服務器將收到 avatar 中的二進製文件數組 請求參數。