HTML5 的File API 通過以下步驟實現(xiàn)本地文件處理：1. 獲取文件：使用<input type="file"> 和FileList 對象獲取用戶選擇的文件；2. 預(yù)覽圖片：通過FileReader 的readAsDataURL 方法實現(xiàn)上傳前預(yù)覽；3. 多文件控制：結(jié)合multiple 和accept 屬性限製文件類型與數(shù)量，並在JS 中遍歷驗證；4. 上傳文件：利用FormData 包裝數(shù)據(jù)並通過fetch 或XMLHttpRequest 發(fā)送至服務(wù)器，後端需支持multipart/form-data 格式。整個流程包括獲取、預(yù)覽、限制和上傳四個關(guān)鍵環(huán)節(jié)。

在網(wǎng)頁開發(fā)中，HTML5 的File API 為我們提供了處理本地文件的能力，包括讀取、預(yù)覽和上傳文件。它讓前端可以更靈活地處理用戶選擇的文件，而不必每次都依賴後端。

獲取用戶選擇的文件

當(dāng)用戶通過<input type="file">選擇文件後，我們可以通過JavaScript 獲取到這些文件。最常見的方式是使用FileList對象，它是一個類數(shù)組結(jié)構(gòu)，包含所有選中的File對象。

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

然後用JS 獲?。?/p>

 const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
    const files = this.files; // 得到一個FileList 對象console.log(files);
});

每個File對象包含文件名、大小、類型等信息。比如files[0].name是文件名， files[0].size是字節(jié)數(shù)。

注意：如果input 沒有設(shè)置multiple屬性，那麼一次只能選一個文件。

預(yù)覽選中的圖片文件

很多時候我們需要在上傳前先預(yù)覽圖片，比如頭像上傳或者圖片編輯器。這時候可以用FileReader來讀取文件內(nèi)容。

示例代碼如下：

• 創(chuàng)建一個FileReader實例
• 使用readAsDataURL方法讀取文件
• 在onload回調(diào)中獲取結(jié)果並賦值給img 元素

const reader = new FileReader();
reader.onload = function (e) {
    const preview = document.getElementById('preview');
    preview.src = e.target.result;
};
reader.readAsDataURL(file);

這樣就能實現(xiàn)圖片的本地預(yù)覽了，不需要上傳服務(wù)器也能看到效果。

多文件上傳與限制控制

有時候我們希望讓用戶一次上傳多個文件，同時又不想他們隨便傳一堆大文件。這時候可以結(jié)合multiple和accept屬性來增強控制。

 <input type="file" multiple accept="image/*">

這段代碼允許用戶選擇多個圖片文件。而在JS 中遍歷這些文件也很簡單：

 for (let i = 0; i < files.length; i ) {
    const file = files[i];
    if (!file.type.startsWith(&#39;image/&#39;)) continue;
    // 只處理圖片文件}

你還可以加上大小限制，例如只允許小於2MB 的文件：

 if (file.size > 2 * 1024 * 1024) {
    alert('文件不能超過2MB');
    continue;
}

上傳文件到服務(wù)器

最終我們要把文件發(fā)送到服務(wù)器?？梢允褂?code>FormData來包裝數(shù)據(jù)，再配合fetch或XMLHttpRequest發(fā)送請求。

基本流程如下：

• 創(chuàng)建一個FormData實例
• 使用append()添加文件字段
• 發(fā)送POST 請求

const formData = new FormData();
formData.append('file', file);

fetch('/upload', {
    method: 'POST',
    body: formData
});

服務(wù)器那邊就可以像普通表單一樣接收文件了。注意確保後端支持multipart/form-data 格式。

如果是多文件上傳，可以在循環(huán)裡多次append，或者直接使用new DataTransfer()構(gòu)造一個包含多個文件的列表再提取出來。

基本上就這些操作了。整個過程不算複雜，但每一步都有一些容易忽略的小細節(jié)，比如跨域問題、文件類型驗證、內(nèi)存釋放等等。實際使用時可以根據(jù)項目需求靈活組合。

以上是處理文件選擇並使用HTML5文件API上傳的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！