FileReader readAsText()

admin發表於2020-05-09
AST

readAsDataURL() 方法非同步方式將檔案內容讀取為文字字串格式。

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

語法結構：

[JavaScript] 純文字檢視 複製程式碼
fileReader.readAsText(blob[, encoding])

引數解析：

（1）.blob：引數可以是 Blob 或者 File 物件。

（2）.encoding：可選，規定以哪種編碼格式讀取字串，預設值為"utf-8"。

程式碼例項如下：

[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('當前瀏覽器不支援');
    return;
  }
  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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202005/09/142815u7o7wwdtqcc46447.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過 readAsText() 方法將 txt 檔案內容讀取為字串。

（2）.第二個引數省略，預設以 "utf-8" 編碼格式讀取資料。

（3）.以非同步方式讀取資料，方法不會直接返回結果。

（4）.讀取完畢後，result 屬性返回讀取的資料，並將其寫入 div。

如果規定額編碼引數和讀取檔案的實際編碼方式不一致，可能會導致亂碼現象。

上述讀取檔案的編碼是 "utf-8"，程式碼修改如下：

[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('當前瀏覽器不支援');
    return;
  }
  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,"gbk");
      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>

將方法的第二個引數修改為 "gbk"，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202005/09/142850fwha1gpympzz0ng1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到顯示的資料出現了亂碼現象，這一點要特別注意。

相關文章