FileRead · 前端技術總結

## 一、介紹 FileReader用來把文件讀入內存，并且讀取文件中的數據。其接口提供了一個異步API，使用該API可以在瀏覽器主線程中異步訪問文件系統，讀取文件中的數據。到目前文職，只有FF3.6+和Chrome6.0+實現了FileReader接口。 ## 二、接口方法 | 方法 | 參數 | 描述 | | --- | --- | --- | | readAsText | file | 將文件讀取為文本 | | readAsDataURL | file | 將文件讀取為DataURL | | readAsBinaryString | file | 將文件讀取為二進制編碼 | | readAsArrayBuffer | file | 將文件讀取為ArrayBuffer | | abort | none | 終止讀取操作 | ## 三、接口事件 | 事件 | 描述 | | --- | --- | | onabort | 中斷 | | onerror | 出錯 | | onloadstart | 開始 | | onprogress | 正在讀取 | | onload | 成功讀取 | | onloadend | 讀取完成，無論成功失敗 | ## 四、示例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FileReader</title> </head> <body> <input type="file" multiple="multiple"> <button type="button">獲取</button> <script> var $ = document.querySelectorAll.bind(document), log = console.log.bind(console); $('button')[0].addEventListener('click', handle); function handle() { var files = $('input')[0].files, len = files.length, file; if(len > 0) { // 如果有選中圖片 for(var i=0; i<len; i++) { file = files[i]; if(/image\/[jpeg,gif,jpg,png]/.test(file.type)) { // 如果是圖片 log(file); // readAsText(file); // readAsDataURL(file); // readAsBinaryString(file); readAsArrayBuffer(file); // createObjectURL(file); } } } else { log('請選擇圖片!'); } } // 將文件以文本形式讀入頁面 function readAsText(file) { var fileReader = new FileReader(); fileReader.readAsText(file); fileReader.onload = function(e) { var p = document.createElement('p'); p.textContent = e.currentTarget.result; $('body')[0].appendChild(p); } } // 將文件以Data URL形式讀入頁面 function readAsDataURL(file) { var fileReader = new FileReader(); fileReader.readAsDataURL(file); log(fileReader) fileReader.onload = function(e) { var img = document.createElement('img'); img.src = e.currentTarget.result; img.onload = function() { $('body')[0].appendChild(img); } } } // 將文件以二進制形式讀入頁面 function readAsBinaryString(file) { var fileReader = new FileReader(); fileReader.readAsBinaryString(file); fileReader.onload = function(e) { var p = document.createElement('p'); p.textContent = e.currentTarget.result; $('body')[0].appendChild(p); } } // 將文件以Array Buffer形式讀入頁面 function readAsArrayBuffer(file) { var fileReader = new FileReader(); fileReader.readAsArrayBuffer(file); fileReader.onload = function(e) { log(e.currentTarget.result); } } // 創建對象URL function createObjectURL(file) { var img = document.createElement('img'); img.onload = function() { window.URL.revokeObjectURL(img.src); // revokeObjectURL() 靜態方法用來釋放一個之前通過調用 URL.createObjectURL() 創建的已經存在的 URL 對象 } img.src = window.URL.createObjectURL(file); $('body')[0].appendChild(img); } </script> </body> </html> ~~~