HTML 5 中FileReader的使用

時間 2019-11-10

原文原文鏈接

FileReader 接口主要用來把文件讀入到內存中，並且讀取文件裏的數據。FileReader接口提供了一個異步API,使用該API可以在瀏覽器主線程中異步訪問文件系統javascript

，讀取文件裏的數據。html

FileReader的使用方式很easy。可以依照例如如下步驟建立FileReader對象並調用其方法：java

1.檢測瀏覽器對FileReader的支持後端

<script type="text/javascript">
    if(typeof FileReader == "undefined")
	alert("瀏覽器不支持FileReader");
    else
	alert("瀏覽器支持FileReader");
</script>

2. 調用FileReader對象的方法瀏覽器

FileReader 的實例擁有 4 個方法，當中 3 個用以讀取文件，還有一個用來中斷讀取。如下的表格列出了這些方法以及他們的參數和功能。需要注意的是，無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在 result屬性中。異步

方法名	參數	描寫敘述
abort	none	中斷讀取
readAsBinaryString	file	將文件讀取爲二進制碼
readAsDataURL	file	將文件讀取爲 DataURL
readAsText	file, [encoding]	將文件讀取爲文本

readAsText：該方法有兩個參數，當中第二個參數是文本的編碼方式。默認值爲 UTF-8。this

這種方法很easy理解。將文件以文本方式讀取，讀取的結果便是這個文本文件裏的內容。
readAsBinaryString：該方法將文件讀取爲二進制字符串。一般咱們將它傳送到後端。後端可以經過這段字符串存儲文件。編碼

readAsDataURL：這是樣例程序中用到的方法。該方法將文件讀取爲一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。spa

這裏的小文件通常是指圖像與 html 等格式的文件。線程

3. 處理事件

FileReader 包括了一套完整的事件模型，用於捕獲讀取文件時的狀態。如下這個表格概括了這些事件。

事件	描寫敘述
onabort	中斷時觸發
onerror	出錯時觸發
onload	文件讀取成功完畢時觸發
onloadend	讀取完畢觸發。無論成功或失敗
onloadstart	讀取開始時觸發
onprogress	讀取中

文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。假設讀取失敗。則 result 的值爲 null ，不然便是讀取的結果。絕大多數的程序都會在成功讀取文件的時候，抓取這個值。

4. 使用演示樣例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>FileReader的使用演示樣例</title>
		<script type="text/javascript">
			var result = document.getElementById("result");
			var file = document.getElementById("file");
			if(typeof FileReader == "undefined"){
				result.innerHTML = "您的瀏覽器不支持FileReader!!";
				file.setAttribute("disabled","disabled");
			}
			
			// 讀取圖片路徑
			function readAsDataURL(){
				var file1 = document.getElementById("file").files[0];
				if(!/image\/\w+/.test(file1.type)){
					alert("請傳圖片文件,謝謝!!");
					return false;
				}
				var reader = new FileReader();
				reader.readAsDataURL(file1);
				reader.onload = function(e){
					var result = document.getElementById("result");
					// 在頁面顯示文件
					result.innerHTML = "<img src='" + this.result + "' alt=''/>";
				}
			}
			
			// 讀取二進制文件
			function readAsBinaryString(){
				var file1 = document.getElementById("file").files[0];
				var reader = new FileReader();
				reader.readAsBinaryString(file1);
				reader.onload = function(e){
					var result = document.getElementById("result");
					// 在頁面顯示文件
					result.innerHTML =this.result;
				}
			}
			
			// 讀取文本文件
			function readAsText(){
				var file1 = document.getElementById("file").files[0];
				var reader = new FileReader();
				reader.readAsText(file1,"GBK");
				reader.onload = function(e){
					var result = document.getElementById("result");
					// 在頁面顯示文本文件
					result.innerHTML = this.result;
				}
			}
		</script>
	</head>
	<body>
		<p>
			<label>請選擇文件：</label>
			<input type="file" id="file"/>
			<input type="button" onclick="readAsDataURL()" value="讀取圖片數據"/>
			<input type="button" onclick="readAsBinaryString()" value="讀取二進制數據"/>
			<input type="button" onclick="readAsText()" value="讀取文本文件"/>
		</p>
		<div id="result">
		</div>
	</body>
</html>

file控件中選擇一個圖片文件。並且點擊讀取圖片數據button，執行結果例如如下圖：