亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

HTML5讀取文件

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

var reader = new FileReader();      // 返回一個(gè)FileReader實(shí)例

返回的實(shí)例具有以下3個(gè)屬性：

• FileReader.result

• FileReader.readyState

• FileReader.error

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

FileReader實(shí)例具有以下4個(gè)方法：

• FileReader.readAsText()

• FileReader.readAsDataURL()

• FileReader.readAsArrayBuffer()

• FileReader.abort()

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

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

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

同時(shí)FileReader實(shí)例具有以下6個(gè)事件：

• FileReader.onprogress

• FileReader.onloadend

• FileReader.onloadstart

• FileReader.onload

• FileReader.onerror

• FileReader.onabort

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

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

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

HTML5保存文件

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

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

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

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

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

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

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

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讀取文本文件功能，我們還可以實(shí)現(xiàn)對(duì)文本文件的編輯功能，比如JSON文件壓縮，實(shí)際上就是拿到文本內(nèi)容后，對(duì)內(nèi)容過(guò)濾空字符：

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

再補(bǔ)充一點(diǎn)內(nèi)容，createObjectURL()方法還有一個(gè)對(duì)應(yīng)的URL.revokeObjectURL()方法，用來(lái)釋放生成的URL對(duì)象，用法是這樣的：

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

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

小結(jié)

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

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

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