FileAPI

介紹

HTML5 為我們提供了 File API 相關規范。主要涉及 File 接口 和 FileReader 對象 。

本文整理了兼容性檢測、文件選擇、屬性讀取、文件讀取、進度監控、大文件分片上傳以及拖拽上傳等開發中常見的前端文件操作。

準備工作

首先，我們的 File 來自于 標簽中選中的文件列表。所以，準備如下的 HTML 代碼：

檢測兼容性

File 對象是特殊類型的 Blob。在 script 入口處，應該檢測當前瀏覽器是否支持 File API：

if (!(window.File && window.FileReader && window.FileList && window.Blob)) { throw new Error("當前瀏覽器對FileAPI的支持不完善");}

監聽文件選擇

對于 type 為 file 類型的 標簽，在選擇文件的時候，會觸發 change 事件。用戶選中的文件信息也會傳入回調函數的第一個參數中。

function handleFileSelect(event) { const { files } = event.target; if (!files.length) { console.log("沒有選擇文件"); return; } console.log("選中的文件信息是：

總結

以上是生活随笔為你收集整理的file 选择的文件胖多有多大_「HTML5 进阶」FileAPI 文件操作实战，内附详细案例，建议收藏...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。