js利用FileReader讀取本地檔案或者blob方式
目錄
- FileReader讀取本地檔案或blob
- 一、FileReader的使用
- 二、FileReader的方法
- 三、FileReader的屬性
- 四、FileReader的事件
- 使用FileReader讀取本地磁碟檔案問題
FileReader讀取本地檔案或blob
FileReader物件提供了非同步讀取儲存在使用者計算機上的檔案的內容，使用 File或 Blob 物件指定要讀取的檔案或資料，FileReader介面提供了讀取檔案的方法和包含讀取結果的事件模型。
一、FileReader的使用
注意：如果需要相容低版本的瀏覽器，需要判斷一下FileReader物件是否存在。
if (window.FileReader) {
let reader = new FileReader();
} else {
console.log('你的瀏覽器不支援讀取檔案');
}二、FileReader的方法
| 方法 | 作用 | 引數 | 返回值 |
| abort() | 中止讀取操作 | www.cppcns.comnone | none |
| readAsArrayBuffer() | 讀取file和Blob內容 | file/blob | result屬性中返回ArrayBuffer資料物件的檔案內容 |
| readAsBinaryString()[已被W3廢棄] | 讀取file和Blob內容 | file/blob | result屬性中返回原始二進位制資料的檔案內容 |
| readAsDataURL() | 讀取file和Blob內容 | file/blob |
result屬性中返回data:URL格式的Base64字串的檔案內容 |
| readAsText() | 讀取file和Blob內容 | file/blob | result屬性中返回一個字串的檔案內容 |
三、FileReader的屬性
FileReader.error(只讀)：一個異常，表示在讀取檔案時發生的錯誤FileReader.readyState(只讀http://www.cppcns.com)：表示FileReader狀態的數字
| 值 | 狀態名 | 描述 |
| 0 | EMPTY | 未載入任何資料 |
| 1 | LOADING | 資料載入中 |
| 2 | DONE |
資料載入完畢 |
FileReader.result(只讀)：讀取完檔案的內容，該屬性在資料讀取完成之後才有效，檔案內容的格式是由讀取的方法所決定。
四、FileReader的事件
FileReader.onabort：該事件是中止讀取的時候觸發。FileReader.onerror：該事件是讀取發生錯誤的時候觸發。FileReader.onload：該事件是讀取完成的時候觸發。FileReader.onloadstart：該事件是讀取操作剛開始的時候觸發。FileReader.onloadend：該事件是讀取結束的時候觸發（失敗和成功的時候都會觸發）。FileReader.onprogress：該事件在讀取的時候觸發。
注意：
1、由於安全性原因，FileReader讀取的是由input傳入的檔案或者是由ajax讀取服務端返回的檔案，不可以是指定路徑的檔案的讀取。
2、FileReader可以在webworker中使用。
<!DOCTYPE html> <html class="no-"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="stylesheet" href="" /> </head> <body> <input type="file" id="myFile" />http://www.cppcns.com <script type="text/"> if (window.FileReader) { var reader = new FileReader(); } else { console.log('你的瀏覽器不支援讀取檔案'); } var myFile = document.querySelector('#myFile'); myFile.onchange = function () { var file = myFile.files[0]; reader.readAsDataURL(file)客棧; reader.onload = function () { var data = reader.result; //base64形式的檔案內容 }; reader.onerror = function(){ console.log('讀取失敗'); console.log(reader.error); } }; </script> </body> </html>
使用FileReader讀取本地磁碟檔案問題
執行一個js檔案 （將js檔案置於專案的src下）
(1) .net.URL url = TestScriptEngine.class.getClassLoader().getResource("a.js");
(2)//System.out.println(url.getPath().substring(1).replace("%20"," "));
(3)FileReader fileReader = new FileReader(url.getPath());
執行時
出現：Exception in thread "main" java.io.FileNotFoundException: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js (The system cannot find the path specified)
若把url.getPath()換成"D:/Eclipse WorkSpace/(java300)ScriptManager/bin/a.js"我的本地檔案目錄，則可以成功讀取檔案
url.getPath()的值為： D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js 但是不能找到載入檔案
問題就出現在“%20” ，Eclipse WorkSpace之間本來是空格，系統自動將其換為%20，導致執行是出錯
對url.getPath()作一些處理，把url.getPath().substring(1).replace("%20"," "); 把%20替換為" "空格；問題解決
以上為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。