JavaScript >> Javascript 文檔 >  >> Tags >> Error

在 JavaScript 中處理文件,第 3 部分:進度事件和錯誤

FileReader 對像用於從可通過瀏覽器訪問的文件中讀取數據。在我之前的帖子中,您學習瞭如何使用 FileReader 對象可以輕鬆地從各種格式的文件中讀取數據。 FileReader 非常類似於 XMLHttpRequest 在很多方面。

進度事件

進度事件變得如此普遍,以至於它們實際上被寫在單獨的規範中 1 .這些事件旨在一般地指示數據傳輸的進度。這種傳輸發生在從服務器請求數據時,也發生在從磁盤請求數據時,這就是 FileReader 會的。

有六個進度事件:

  • loadstart – 表示加載數據的過程已經開始。此事件總是首先觸發。
  • progress – 在加載數據時多次觸發,從而可以訪問中間數據。
  • error – 加載失敗時觸發。
  • abort – 通過調用 abort() 取消數據加載時觸發 (適用於 XMLHttpRequestFileReader )。
  • load – 僅在成功讀取所有數​​據時觸發。
  • loadend – 當對象完成數據傳輸時觸發。總是觸發並且總是在 error 之後觸發 , abort , 或 load .

兩個事件,errorload ,在我之前的帖子中討論過。其他事件讓您可以更精細地控制數據傳輸。

跟踪進度

當您想跟踪文件閱讀器的進度時,請使用 progress 事件。 event 此事件的對象包含三個屬性來監視正在傳輸的數據:

  • lengthComputable – 一個布爾值,指示瀏覽器是否可以確定數據的完整大小。
  • loaded – 已讀取的字節數。
  • total – 要讀取的總字節數。

此數據的目的是允許使用來自 progress 的信息生成進度條 事件。例如,您可能正在使用 HTML5 <progress> 元素來監視讀取文件的進度。您可以使用如下代碼將進度值與實際數據聯繫起來:

var reader = new FileReader(),
     progressNode = document.getElementById("my-progress");

reader.onprogress = function(event) {
    if (event.lengthComputable) {
        progressNode.max = event.total;
        progressNode.value = event.loaded;
    }
};

reader.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;
 
    if (error != null) {
        console.error("File could not be read! Code " + error.code);
    } else {
        progressNode.max = 1;
        progressNode.value = 1;
        console.log("Contents: " + contents);
    }
};

reader.readAsText(file);

這類似於 Gmail 用於拖放文件上傳實現的方法,您可以在將文件拖放到電子郵件後立即看到一個進度條。該進度條指示有多少文件已傳輸到服務器。

處理錯誤

即使您正在讀取本地文件,讀取仍然可能失敗。 文件 API 規範 2 定義了四種類型的錯誤:

  • NotFoundError – 找不到文件。
  • SecurityError – 關於文件或讀取的某些內容是危險的。瀏覽器對於何時發生這種情況有一些餘地,但通常如果文件加載到瀏覽器中存在危險或瀏覽器執行了太多讀取操作,您會看到此錯誤。
  • NotReadableError – 文件存在但無法讀取,很可能是由於權限問題。
  • EncodingError – 主要是在嘗試讀取為數據 URI 並且結果數據 URI 的長度超出瀏覽器支持的最大長度時。

當文件讀取過程中發生錯誤時,FileReader 對象的 error 屬性被分配為上述錯誤之一的實例。至少,規範是這樣寫的。實際上,瀏覽器將其實現為 FileError 具有 code 的對象 指示已發生錯誤類型的屬性。每個錯誤類型都由一個數字常量值表示:

  • FileError.NOT_FOUND_ERR 對於文件未找到錯誤。
  • FileError.SECURITY_ERR 用於安全錯誤。
  • FileError.NOT_READABLE_ERR 對於不可讀的錯誤。
  • FileError.ENCODING_ERR 用於編碼錯誤。
  • FileError.ABORT_ERRabort() 在沒有正在進行的讀取時調用。

您可以在 error 期間測試錯誤類型 事件或在 loadend 期間 :

var reader = new FileReader();

reader.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;
 
    if (error != null) {
        switch (error.code) {
            case error.ENCODING_ERR:
                console.error("Encoding error!");
                break;

            case error.NOT_FOUND_ERR:
                console.error("File not found!");
                break;

            case error.NOT_READABLE_ERR:
                console.error("File could not be read!");
                break;

            case error.SECURITY_ERR:
                console.error("Security issue with file!");
                break;

            default:
                console.error("I have no idea what's wrong!");
        }
    } else {
        progressNode.max = 1;
        progressNode.value = 1;
        console.log("Contents: " + contents);
    }
};

reader.readAsText(file);

下一個

FileReader object 是一個功能齊全的對象,具有很多功能並且與 XMLHttpRequest 有很多相似之處 .通過閱讀最後三篇文章,您現在應該能夠使用 JavaScript 從文件中讀取數據,並在必要時將該數據發送回服務器。但是,文件 API 生態系統比本系列中已經討論的要大得多,在下一部分中,您將了解旨在處理文件的強大新功能。

參考

  1. 進度事件
  2. 文件 API

Tutorial JavaScript 教程
  1. 終端命令……在 file.JS 文件“內部”編寫代碼……你是怎麼做到的?

  2. 宣布 N|Solid 4.7.0

  3. 結合 React Query 和 GraphQL 的強大功能進行數據獲取和狀態管理

  4. 10 個算法 🚀 提升你的 JavaScript 技能 🦄

  5. 我應該使用 Composition API 代替 VueX 嗎?

  6. 如何在 React 中調試不必要的重新渲染

  7. jQuery提交函數的泛化

  1. 會話和基於令牌的身份驗證之間的真正區別是什麼

  2. ⚡️ 30 天香草 JS ⚡️

  3. 在 JS 中,我只能 require() 從模塊中導出嗎?

  4. Dockerize Vite+ReactJS 應用程序

  5. 所有 Hooks 系列:了解內置的 React Hooks

  6. Web 開發者必須知道的符號

  7. 使用 cookie 啟用 4 位密碼自動填充

  1. 我們如何使用 Vue 和 Webpack 為大學活動創建網站和 CMS

  2. 修復在 Cloudflare 頁面上構建的 Remix.run

  3. 使用 React 創建一個很酷的登錄頁面

  4. 面向 Angular 開發人員的 Nest.js 簡介