如何限制使用 JavaScript 選擇的最大文件數

我們使用 multiple HTML <input type="file"> 上的屬性 允許在我們的 HTML 表單中上傳多個文件的元素。

但是，<input> 元素沒有提供任何屬性來指定一次可以上傳多少個文件。

為了限制選擇上傳的最大文件數，我們必須使用 JavaScript。

假設您有以下用於文件上傳的 HTML 元素：

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

現在您要確保一次只上傳 2 個文件。以下是你可以做到的：

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

// Listen for files selection
input.addEventListener('change', (e) => {
    // Retrieve all files
    const files = input.files;

    // Check files count
    if (files.length > 2) {
        alert(`Only 2 files are allowed to upload.`);
        return;
    }

    // TODO: continue uploading on server
});

input.files 屬性返回一個 FileList 對象。然後我們檢查 FileList 中的元素數量 以確保它們不超過最大允許限制。