FileReader result 屬性

admin發表於2020-05-03

FileReader result 屬性根據讀取內容方法的不同返回對應格式的內容。

更多關於 FileReader 內容參閱 JavaScript FileReader 一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let result = fileReader.result

根據讀取方法的不同，result 屬性返回值的型別也不同。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#txt {
  width: 180px;
  height: 50px;
  line-height: 50px;
  border: 2px dotted green;
  font-size: 12px;
  text-align: center;
}
</style>
<script>
window.onload = ()=> {
  let reader;
  if (FileReader) {
    reader = new FileReader();
  } else {
    alert('當前瀏覽器不支援');
  }
  let inputFile = document.getElementById('file');
  let txt = document.getElementById("txt");

  inputFile.onchange = ()=> {
    let file = inputFile.files[0];
    if (/text\/\w+/.test(file.type)) {
      reader.readAsText(file);
      reader.onload = function () {
        txt.innerHTML = reader.result;
      }
    } else {
      alert('必須是文字檔案');
    }
  }
}
</script>
</head>
<body>
  <div><input type="file" id="file" /></div>
  <div id="txt"></div>
</body>
</html>

上面程式碼限定檔案域只能上傳文字型別檔案。

然後將讀取的文字檔案內容寫入 div，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202005/03/112654gf5w7qva5nv79h9i.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.檔案域選中檔案後觸發 change 事件，進而執行事件處理函式。

（2）.通過正規表示式判斷上傳的是否是文字型別檔案，否則彈出警告框。

（3）.readAsText() 方法以非同步方式將內容讀取為字串格式。

（4）讀取完畢觸發 load 事件，最後通過 result 屬性將結果寫入 div。

根據讀取方法的不同，result 返回值的格式也會不同，具體參閱 FileReader 讀取檔案一章節。

相關文章