HTML5 FileReader介面學習筆記
阿新 • • 發佈：2022-05-03
1、FileReader概述
FileReader 物件允許Web應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用 File 或 Blob 物件指定要讀取的檔案或資料。
其中File物件可以是來自使用者在一個<input>元素上選擇檔案後返回的FileList物件,也可以來自拖放操作生成的DataTransfer物件,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果。
2、FileReader介面方法
方法名 |
引數 |
描述 |
|---|---|---|
readAsBinaryString |
file |
將檔案讀取為二進位制碼 |
readAsText |
file,[encoding] |
將檔案讀取為文字 |
readAsDataURL |
file |
將檔案讀取為DataURL |
readAsArrayBuffer |
file |
將檔案讀取為ArrayBuffer物件 |
abort |
(none) |
中斷讀取操作 |
3、FileReader介面事件
事件 |
描述 |
|---|---|
onabort |
資料讀取中斷時觸發 |
onerror |
資料讀取出錯時觸發 |
onloadstart |
資料讀取開始時觸發 |
onprogress |
資料讀取中 |
onload |
資料讀取成功完成時觸發 |
onloadend |
資料讀取完成時觸發，無論成功失敗 |
4、使用例項
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Html5Test</title> </head> <body> <article> <header></header> <section> <p> <lable>請選擇一個檔案：</lable> <input type="file" id="file_reader"> <input type="button" value="讀取影象" onclick="readAsDataUrl();"> <input type="button" value="讀取二進位制資料" onclick="readAsBinaryString();"> <input type="button" value="讀取文字檔案" onclick="readAsText();"> </p> <div id="file_reader_result" name="file_reader_result"> <!-- 這裡用來顯示讀取結果 --> </div> <script> var file_reader_result = document.getElementById("file_reader_result"); // 檢測瀏覽器是否支援FileReader if (typeof FileReader == "undefined") { file_reader_result.innerHTML = "您的瀏覽器不支援FileReader"; file.setAttribute('disabled', 'disabled'); } // 將檔案以Data Url形式讀入頁面 function readAsDataUrl(){ // 檢查是否為影象檔案 var f = document.getElementById("file_reader").files[0]; if (!/image/w+/.test(f.type)) { file_reader_result.innerHTML = "請上傳圖片檔案！"; return false; }; var reader = new FileReader(); // 將檔案以Data Url形式讀入頁面 reader.readAsDataURL(f); reader.onload = function(e){ file_reader_result.innerHTML = '<img src="' + this.result + '" alt="圖片" />'; } } // 將檔案以二進位制形式讀入頁面 function readAsBinaryString(){ // 檢查是否為影象檔案 var f = document.getElementById("file_reader").files[0]; if (!/image/w+/.test(f.type)) { file_reader_result.innerHTML = "請上傳圖片檔案！"; return false; }; var reader = new FileReader(); // 將檔案以二進位制形式讀入頁面 reader.readAsBinaryString(f); reader.onload = function(e){ file_reader_result.innerHTML = this.result; } } // 將檔案以文字形式讀入頁面 目前測試僅支援txt檔案 function readAsText(){ // 檢查是否是文字檔案 var f = document.getElementById("file_reader").files[0]; if (!/text/w+/.test(f.type)) { file_reader_result.innerHTML = "請上傳文字檔案！"; return false; }; var reader = new FileReader(); // 將檔案以文字形式讀入頁面 reader.readAsText(f); reader.onload = function(e){ file_reader_result.innerHTML = this.result; } } </script> </section> </article> </body> </html>
更多參考內容詳見：MDN FileReader