前端開發：誰說JavaScript不能讀取檔案？

一說到讀取檔案，很多小夥伴第一時間想到的是php，asp.net這些背景語言來實作。

javascript一直都沒有提供相關的檔案讀取接口，但有時我們确實需要讀取本地檔案内容，下面是兩種可能的讀取方法。

使用 HTML5 中的FileReader對象

HTML5 引入的 FileReader 可以幫助我們讀取本地檔案,但是有一個限制,就是我們不能直接使用檔案路徑的方式來通路檔案，而是首先需要使用者選擇檔案（通過input标簽）。

首先你需要在 html 檔案中添加檔案選擇表單，如下：

<input type="file" id="file-input" />
<div id="file-content"></div>
           

接着就可以在 JavaScript 中進行(使用者選擇的)檔案讀取了:

function readSingleFile(e) {
 //擷取選擇的檔案對象
 var file = e.target.files[0];
 if (!file) {
return;
 }
 // 建立FileReader對象
 var reader = new FileReader();
 // load 回調
 reader.onload = function(e) {
 var contents = e.target.result;
 alert(contents) // 内容處理

 };
 // 讀取檔案
 reader.readAsText(file,"utf-8");
}
// 添加監聽事件
var fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", readSingleFile, false);
           

運作結果如下：