file 选择的文件胖多有多大_「HTML5 进阶」FileAPI 文件操作实战,内附详细案例,建议收藏...
生活随笔
收集整理的這篇文章主要介紹了
file 选择的文件胖多有多大_「HTML5 进阶」FileAPI 文件操作实战,内附详细案例,建议收藏...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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 文件操作实战,内附详细案例,建议收藏...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 食用油的烹饪应用有哪些?
- 下一篇: html5 项目案例_互动案例技术分析(