JavaScript讀取本地檔案內容（相容低版本IE）

poo發表於2021-07-20
JavaScript

# FileReader物件

  • FileReader 物件允許Web應用程式非同步讀取儲存在使用者計算機上的檔案

檔案內容讀取樣例

<div>
  上傳檔案 ： <input type="file" name="file" id="fileId" onchange="read(event)"/>
</div>
<textarea id="fileTxt">  顯示文字內容  </textarea>
  function read() {
    /**
     * file身上的屬性
        * lastModifiedDate：檔案最後修改時間
        * name：檔名
              * GBK 漢字2位元組
              * UTF8 漢字3位元組
        * size：檔案位元組大小
        * type：檔案型別
    */
    var file = event.target.files[0];
    var reader = new FileReader();
    //開始讀取指定的檔案中的內容。一旦完成，result屬性中將包含一個字串以表示所讀取的檔案內容。
    reader.readAsText(file, "UTF-8");//讀取檔案 
    reader.onload = function (evt) {
      var fileString = evt.target.result;
      document.getElementById('fileTxt').innerHTML = fileString;
    }
  }
複製程式碼

new FileReader() 例項簡單介紹

  • FileReader.onloadstart事件
    • 該事件在讀取操作開始時觸發
  • FileReader.onload事件
    • 該事件在檔案讀取操作完成時觸發。
  • FileReader.onloadend事件
    • 該事件在讀取操作結束時，無論成功還是失敗都會觸發觸發
  • FileReader.readAsText()、FileReader.readAsBinaryString()和FileReader.readAsDataURL()方法
    • 讀取指定的Blob中的內容，result屬性中將包含讀取的檔案內容。
      • readAsText()的結果以字串形式展示
      • readAsBinaryString()以原始二進位制展示
      • readAsDataURL()以Base64字串以表示
  • 其他詳細用法，請參考 MDN ?點選

# ActiveXObject物件

FileReader物件固然好用，但是隻支援到IE10+，對於低版本IE只能藉助 ActiveXObject

  • 由於ActiveXObject 是微軟提供的，因此只支援IE核心的瀏覽器，也可用它檢驗當前瀏覽器是否為IE

低版本IE檔案內容讀取示例

<div>
  檔案路徑： <input type="input" id='URL' placeholder="請輸入需讀取的檔案路徑" />
  <button onclick="getTxt()">獲取</button>
 <textarea id="fileTxt">  顯示文字內容  </textarea>
</div>
  function getTxt() {
    if (window.ActiveXObject || "ActiveXObject" in window){
		    return true;
	 }else{
                 alert('該瀏覽器不支援ActiveXObject')
	    	return false; 
	  }
    var ActiObj = new ActiveXObject("Scripting.FileSystemObject");
    var url=  document.getElementById('URL').value;
    var file = ActiObj.OpenTextFile(url, 1);//檔案路徑
    var txt = file.ReadAll();
    document.getElementById('fileTxt').innerHTML = txt;
  }
複製程式碼
  • 完整例項檔案，可參考 Git ?點選

可能會遇到的問題

顯示、Automation伺服器不能建立物件

  • 如：

config.PNG

  • 這是由於IE瀏覽器中的安全限制造成的
  • 解決：檢查IE->internet選項->安全->自定義級別找到ActiveX控制元件進行修改啟用即可

安全.PNG

  • 瘋狂吐槽：之前有個舊裝置XP系統裝的IE8,以為ActiveXObject問題，結果排查半天是indexOf不支援。

相關文章