免費的HTML5連載來了《HTML5網頁開發實例具體解釋》連載（四）HTML5中的FileSystem接口

時間 2019-11-30

標籤免費 html5 html 連載網頁開發實例具體解釋 filesystem 接口欄目 HTML5 简体版

原文原文鏈接

HTML 5除了提供用於獲取文件信息的File對象外，還加入了FileSystem相關的應用接口。javascript

FileSystem對於不一樣的處理功能作了仔細的分類，如用於文件讀取和處理的FileReader和FileList對象、用於建立和寫入的Blob和FileWriter對象、用於文件夾和文件系統訪問的DirectoryReader和LocalFileSystem對象等。FileSystem功能的出現是瀏覽器在文件系統上的突破，具備里程碑的意義，儘管眼下還還沒有全然成熟。但足以讓開發人員發揮更大的想象空間。html

1．FileReader對象java

FileReader對象專門用於讀取文件。同一時候可以將文件轉化爲各類格式信息。瀏覽器

使用FileReader對象很easy，FileReader對象實例一共包括4個方法，如表2.8所看到的。學習

表2.8 FileReader對象方法this

方法名稱編碼	說明spa
readAsBinaryStringcode	將文件讀取爲二進制碼htm
readAsDataURL	將文件讀取爲DataURL，一段是以data:開頭的字符串
readAsText	將文件讀取爲文本，第2個參數爲編碼類型，默以爲UTF-8
abort	中斷讀取

如下經過演示樣例展示FileReader對象中readAsDataURL方法的使用。代碼例如如下：

<!DOCTYPE html>
<html>
<body>
	<input type="file" id="input"><br>								<!-- 文件選擇控件 -->
	<img id="img"/>											<!-- 圖片展現 -->
</body>
<script type="text/javascript">
	document.getElementById("input").addEventListener("change", function () {// 監聽選擇控件change事件
		var fileReader = new FileReader();							// 新建FileReader對象實例
		fileReader.onloadend = function(e) {							// 監聽實例loadend事件
			document.getElementById("img").src = e.target.result;		// 設置圖片base64值
		};
		fileReader.readAsDataURL(this.files[0]);						// 讀取文件內容
	}, false);
</script>
</html>

提示：本節FileSystem的演示樣例代碼均在Chrome 28下測試經過。

演示樣例打開執行效果與圖2.19一樣。單擊「選擇文件」button。選中本地圖片，此時「選擇文件」button下方出現相應選中圖片的內容，效果如圖2.21所看到的。

圖2.21 FileReader對象readAsDataURL方法使用

演示樣例中，當用戶選中圖片時。觸發input元素的change事件。在回調事件中新建一個FileReader對象的實例用於讀取圖片文件內容。被讀取的圖片文件返回格式例如如下：

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

圖片被轉化爲DataURL數據，即Base64格式數據。該數據可以被賦予圖片元素的src屬性得到並顯示。

提示：Base64數據格式的說明可以參考網址http://en.wikipedia.org/wiki/Data_URI_scheme。

FileReader做爲FileSystem中的一部分。通常常使用於文件讀取。可以結合上傳文件場景使用。

想了解FileSystem中其它的部分語法和演示樣例，來本書看看吧。

學習HTML5最好的書就是《HTML5網頁開發實例具體解釋》，用代碼學習用案例學習，可比看文字有趣多了！

！

一本書搞定HTML5，從現在開始。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。