js利用FileReader讀取本地文件或者blob方式

更新時(shí)間：2021年12月09日 09:51:08 作者：愚舜

這篇文章主要介紹了js利用FileReader讀取本地文件或者blob方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

FileReader讀取本地文件或blob

FileReader對象提供了異步讀取存儲在用戶計(jì)算機(jī)上的文件的內(nèi)容，使用 File或 Blob 對象指定要讀取的文件或數(shù)據(jù)，F(xiàn)ileReader接口提供了讀取文件的方法和包含讀取結(jié)果的事件模型。

一、FileReader的使用

注意：如果需要兼容低版本的瀏覽器，需要判斷一下FileReader對象是否存在。

if (window.FileReader) {
 let reader = new FileReader();
} else {
 console.log('你的瀏覽器不支持讀取文件');
}

二、FileReader的方法

方法	作用	參數(shù)	返回值
abort()	中止讀取操作	none	none
readAsArrayBuffer()	讀取file和Blob內(nèi)容	file/blob	result屬性中返回ArrayBuffer數(shù)據(jù)對象的文件內(nèi)容
readAsBinaryString()[已被W3廢棄]	讀取file和Blob內(nèi)容	file/blob	result屬性中返回原始二進(jìn)制數(shù)據(jù)的文件內(nèi)容
readAsDataURL()	讀取file和Blob內(nèi)容	file/blob	result屬性中返回data:URL格式的Base64字符串的文件內(nèi)容
readAsText()	讀取file和Blob內(nèi)容	file/blob	result屬性中返回一個(gè)字符串的文件內(nèi)容

三、FileReader的屬性

FileReader.error(只讀)：一個(gè)異常，表示在讀取文件時(shí)發(fā)生的錯(cuò)誤
FileReader.readyState(只讀)：表示FileReader狀態(tài)的數(shù)字

值	狀態(tài)名	描述
0	EMPTY	未加載任何數(shù)據(jù)
1	LOADING	數(shù)據(jù)加載中
2	DONE	數(shù)據(jù)加載完畢

FileReader.result(只讀)：讀取完文件的內(nèi)容，該屬性在數(shù)據(jù)讀取完成之后才有效，文件內(nèi)容的格式是由讀取的方法所決定。

四、FileReader的事件

FileReader.onabort：該事件是中止讀取的時(shí)候觸發(fā)。
FileReader.onerror：該事件是讀取發(fā)生錯(cuò)誤的時(shí)候觸發(fā)。
FileReader.onload：該事件是讀取完成的時(shí)候觸發(fā)。
FileReader.onloadstart：該事件是讀取操作剛開始的時(shí)候觸發(fā)。
FileReader.onloadend：該事件是讀取結(jié)束的時(shí)候觸發(fā)（失敗和成功的時(shí)候都會觸發(fā)）。
FileReader.onprogress：該事件在讀取的時(shí)候觸發(fā)。

注意：

1、由于安全性原因，F(xiàn)ileReader讀取的是由input傳入的文件或者是由ajax讀取服務(wù)端返回的文件，不可以是指定路徑的文件的讀取。

2、FileReader可以在webworker中使用。

<!DOCTYPE html>
<html class="no-js">
	<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" />
		<script type="text/javascript">
			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形式的文件內(nèi)容
				};
                reader.onerror = function(){
                    console.log('讀取失敗');
                    console.log(reader.error);
                }
			};
		</script>
	</body>
</html>

使用FileReader讀取本地磁盤文件問題

執(zhí)行一個(gè)js文件（將js文件置于項(xiàng)目的src下）

(1) java.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());

運(yùn)行時(shí)

出現(xiàn)：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 但是不能找到加載文件

問題就出現(xiàn)在“%20” ，Eclipse WorkSpace之間本來是空格，系統(tǒng)自動將其換為%20，導(dǎo)致運(yùn)行是出錯(cuò)

對url.getPath()作一些處理，把url.getPath().substring(1).replace("%20", " "); 把%20替換為" "空格；問題解決

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: