JS中讀取文件的方法

這篇文章主要介紹了JS中讀取文件的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

因為JavaScript中的Web API有了新的方法File API，所以我們在瀏覽器上讀取文件并處理數據更加方便而且不需要使用到后端服務器。

FileReader就是從一個文件中讀取數據并存儲在一個JavaScript變量中，它與XMLHttpRequest含義差不多，都是從一個外部資源加載數據而且讀操作是異步的，這樣的好處是不會使瀏覽器堵塞。它讀取操作的方法有多種多樣的，例如以下幾種方法

（1）readAsText() – 以純文本的形式返回文件內容

該readAsText()方法可用于讀取文本文件。該方法有兩個參數。第一個參數是用于File或Blob要被讀取的對象。第二個參數用于指定文件的編碼。第二個參數是可選的。如果未指定，UTF-8則默認采用編碼。在設置中需要在文件加載完成后設置一個事件監聽器。onload調用事件時，我們可以檢查result屬性FileReader所獲取文件的內容。

<input type="file" id="file" />
	<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var text=reader.result;
}
reader.readAsText(file);
</script>

（2）readAsArrayBuffer() 方法

該方法將讀取一個Blob或一個File對象并生成一個ArrayBuffer。當讀取操作完成時，readyState 變成 done（已完成），并觸發 loadend 事件，同時 result 屬性中將包含一個 ArrayBuffer 對象用以表示所讀取文件的數據，ArrayBuffer 是固定長度的二進制數據緩沖區。在操作文件時比如將JPEG圖像轉換為PNG

<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var readAsArrayBuffer=reader.result;
}
reader.readAsArrayBuffer(file);
</script>

（3）readAsDataURL()  使用數據URL的形式返回文件內容

該方法接受File或Blob生成數據URL，這基本上是文件數據的base64編碼字符串可以將此數據URL用于設置src圖像屬性等內容

<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	 var dataURL = reader.result;
}
reader.readAsDataURL(file);
</script>

上面的三種方法在使用過程中要在開始讀取之前，必須監聽load事件，而event.target.result是返回讀取的結果。

感謝你能夠認真閱讀完這篇文章，希望小編分享JS中讀取文件的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!