男女成人秒免费试看久久_无码毛片免费自慰09_黄品汇mba旧版本_亚洲少妇与大狗性交对白_人妻无卡中文乱码在线_无码a级毛片免费视频内谢_午夜亚洲亚洲精品不卡_欧美成人在线观看_欧美日本韩国乱伦_十八禁观看污污污网站

HTML5讀取文件

HTML5讀取文件主要利用的就是FileReader這個API，它的使用需要從一個構(gòu)造函數(shù)開始：

var reader = new FileReader();      // 返回一個FileReader實例

返回的實例具有以下3個屬性：

• FileReader.result

• FileReader.readyState

• FileReader.error

其中result屬性是文件讀取成功后的讀取結(jié)果，數(shù)據(jù)的格式取決于使用哪個方法來啟動讀取操作。

FileReader實例具有以下4個方法：

• FileReader.readAsText()

• FileReader.readAsDataURL()

• FileReader.readAsArrayBuffer()

• FileReader.abort()

前3個方法分別是以文本、圖片、其他格式讀取內(nèi)容，讀取的對象可以是Bolb或File，在讀取本地文件的場景下，我們讀取的實際上就是File。

reader.readAsText(file);    //讀取文本文件

FileReader.abort()方法不需要說了，就是中斷文件讀取。

同時FileReader實例具有以下6個事件：

• FileReader.onprogress

• FileReader.onloadend

• FileReader.onloadstart

• FileReader.onload

• FileReader.onerror

• FileReader.onabort

其中onload事件是我們最關(guān)心的一個，該事件將在讀取操作完成時觸發(fā)，在這個事件中我們才能訪問到FileReader.result屬性，得到讀取結(jié)果。

reader.onload = function() {
    console.log(this.result);       //文本內(nèi)容};

使用FileReader讀取文件的整個流程就是這樣，F(xiàn)ile對象我們可以通過<input type="file" >獲取。

HTML5保存文件

保存文件的關(guān)鍵是生成文件對象，可以使用URL.createObjectURL()方法實現(xiàn)，該方法能返回給定對象的URL，用在<a>標簽的href屬性上就可以創(chuàng)建可下載的文件鏈接。

let DownloadDom = document.getElementById("Download");      // a標簽DownloadDom.href = window.URL.createObjectURL(myBlob);      // 生成下載鏈接

createObjectURL()方法的參數(shù)可以是File對象或者Blob對象，前端保存文件通常是希望將已有“內(nèi)容”保存成文件，這種場景我們需要的是Blob對象。

Blob構(gòu)造函數(shù)可以根據(jù)傳入的數(shù)組數(shù)據(jù)返回Blob對象，數(shù)組可以是ArrayBuffer、ArrayBufferView、Blob、DOMString，假如我們希望將一段JSON字符串保存成JSON文件，那么可以這么做：

let myBlob = new Blob(['{"hello":"world"}'], { type: "application/json" });     //Blob對象

關(guān)于Blob構(gòu)造函數(shù)的詳細用法可以從這里了解。

有了createObjectURL和Blob，實際上，我們就可以封裝一個方法，將任意字符串保存成文件，并點擊鏈接下載：

let saveFile = function(fileText) {
    let DownloadDom = document.getElementById("Download");
    if (this.DownloadDom) {
        let myBlob = new Blob([fileText], { type: "application/json" });
        this.DownloadDom.href = window.URL.createObjectURL(myBlob);
        console.log('下載文件已就緒')
    }},

結(jié)合HTML5讀取文本文件功能，我們還可以實現(xiàn)對文本文件的編輯功能，比如JSON文件壓縮，實際上就是拿到文本內(nèi)容后，對內(nèi)容過濾空字符：

let fileText = reader.result;fileText.replace(/\s/g, "");saveFile(fileText)

再補充一點內(nèi)容，createObjectURL()方法還有一個對應的URL.revokeObjectURL()方法，用來釋放生成的URL對象，用法是這樣的：

var obj_url = window.URL.createObjectURL(blob);var iframe = document.getElementById('viewer');iframe.setAttribute('src', obj_url);window.URL.revokeObjectURL(obj_url);

當obj_url已經(jīng)賦值給圖片之后，就可以釋放這個URL對象。這里的關(guān)鍵在于確定URL對象已經(jīng)使用完了，在我們的例子中如果也這么做，實際上是不行的，當用戶點擊下載鏈接的時候會提示網(wǎng)絡(luò)錯誤，因為href指向的鏈接已經(jīng)失效了。猜測原因是，圖片加載并顯示的時候已經(jīng)將數(shù)據(jù)載入內(nèi)存了，這時候釋放URL不會影響到圖片的顯示；而鏈接地址屬于“引用”，點擊瞬間會去訪問URL對象，如果這時候?qū)ο笠呀?jīng)釋放了就會導致鏈接失效。

小結(jié)

HTML5實現(xiàn)文件讀取、編輯、保存其實非常簡單，只不過涉及到的API兼容性都比較堪憂，以上示例僅在chrome里測試過。

完整的示例代碼地址： https://github.com/tower1229/htm5-file-operations

演示地址: https://refined-x.com/htm5-file-operations/