頁面顯示二進位制數原始據亂碼

admin發表於2020-04-11

通過 readAsBinaryString() 方法顯示的資料，可能不少朋友會有疑問。

原本以為是 0101010 這樣類似的二進位制，但是頁面顯示的確實亂碼和英文字元。

程式碼是如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#txt {
  width: 240px;
  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];
    reader.readAsBinaryString(file);
    reader.onload = function () {
      txt.innerHTML = reader.result;
    }
  }
}
</script>
</head>
<body>
  <div><input type="file" id="file" /></div>
  <div id="txt"></div>
</body>
</html>

讀取內容為 "螞蟻部落www.softwhy.com" 文字檔案作為例子。

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

a:3:{s:3:\"pic\";s:43:\"portal/202004/11/093807w0wwe0kc00eh52yg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到列印結果並未期望的一串 1010101類似的二進位制形式。

上述現象分析如下：

（1）.真正的二進位制資料我們並不能肉眼可見。

（2）.原始二進位制資料是 0 或者 1，但是對應的我們肉眼可見的字元並不是 0 或者 1。

（3）.所以，頁面列印出的 101010 不是真正的二進位制資料，而是普通字串。

（4）.我們在頁面所看到的是，將原始資料當作字元編碼，找到對應的字元來顯示，於是就可能出現亂碼。

相關文章