JS中如何讀取文件

在JavaScript中我沒們如何在瀏覽器上讀取文件呢，接下來將在文章中詳細和大家分享，希望對大家有幫助。

因為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中如何讀取文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！