FileAPI

介紹

HTML5 為我們提供了 File API 相關(guān)規(guī)范。主要涉及 File 接口 和 FileReader 對(duì)象 。

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

準(zhǔn)備工作

首先，我們的 File 來自于 標(biāo)簽中選中的文件列表。所以，準(zhǔn)備如下的 HTML 代碼：

檢測(cè)兼容性

File 對(duì)象是特殊類型的 Blob。在 script 入口處，應(yīng)該檢測(cè)當(dāng)前瀏覽器是否支持 File API：

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

監(jiān)聽文件選擇

對(duì)于 type 為 file 類型的 標(biāo)簽，在選擇文件的時(shí)候，會(huì)觸發(fā) change 事件。用戶選中的文件信息也會(huì)傳入回調(diào)函數(shù)的第一個(gè)參數(shù)中。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。