JavaScript 直接操作本地文件的實現代碼

2019-11-21 00:57:06

字體：大中小

來源：轉載

供稿：網友

日前，Mozilla向W3C提交了一個草案，旨在推出一個JavaScript API，讓JavaScript 腳本直接操作本地文件，Firefox的最新瀏覽器版本中已經對該API提供了大量的支持，不過出于安全考慮，該API將只對本地文件提供有限的訪問。
該API引入了一個FileReader 對象，可以異步加載本地文件系統中的文件，并允許開發者為諸如加載失敗，進度，加載完成等事件分配回調函數，它提供的方法可以從本地文件中讀取文本或二進制數據，并通過一個 abort 方法隨時打斷操作。

　　FileReader對象使客戶端的文件訪問成為現實，用戶不必再象以前那樣首先將文件上傳到服務器才能處理，事實上，IE 和 Firefox 已經擁有一些非標準的方法訪問本地文件，但這些方法并非標準 JavaScript 行為。

　　FileReader對象并不需要特別的權限，但出于顯然的安全考慮，直接使用文件路徑進行訪問是不允許的，必須結合常規的 HTML file 對象，用戶點擊瀏覽之后，選擇本地文件，JavaScript 再通過 DOM 引用該文件并進行操作，這個機制使得該 API 相對安全一些，因為任何本地文件的獲取都需要用戶的人工參與。

　　以下例子使用該 API 打開一個本地文件并將文件內容顯示在一個 div 容器中，我們甚至可以在 div 上加上 contentEditable 屬性，用戶可以直接編輯文件的內容，不過，該 API 并沒有提供將文件內容寫回本地文件的方法，因此你編輯的內容無法保存。