JavaScript中讀取和保存文件實例
話說今天只是粗略瀏覽了一下Proxy SwitchySharp的源碼,就收獲了不少東西,其中就包括本文要介紹的讀取和保存文件。
因為Google還不提供同步插件數(shù)據(jù)的功能,所以導入和導出插件配置就必須和文件打交道了。而出于安全原因,只有IE才提供訪問文件的API;但隨著HTML 5的到來,其他瀏覽器也紛紛支持了。
首先說讀取文件。W3C提供了一些File API,其中最重要的是FileReader這個類。
先列出需要用到的HTML標簽:
當選擇了一個文件時,就會把包含這個文件的列表(一個FileList對象)作為參數(shù)傳給handleFiles()函數(shù)了。
這個FileList對象類似一個數(shù)組,可以知道文件的數(shù)目,而它的元素就是File對象了。
從這個File對象可以獲取name、size、lastModifiedDate和type等屬性。
把這個File對象傳給FileReader對象的讀取方法,就能讀取文件了。
FileReader共有4種讀取方法:
1.readAsArrayBuffer(file):將文件讀取為ArrayBuffer。
2.readAsBinaryString(file):將文件讀取為二進制字符串
3.readAsDataURL(file):將文件讀取為Data URL
4.readAsText(file, [encoding]):將文件讀取為文本,encoding缺省值為'UTF-8'
此外,abort()方法可以停止讀取文件。
FileReader對象在讀取文件后,還需要進行處理。為了不阻塞當前線程,API采用了事件模型,可以注冊這些事件:
1.onabort:中斷時觸發(fā)
2.onerror:出錯時觸發(fā)
3.onload:文件成功讀取完畢時觸發(fā)
4.onloadend:文件讀取完畢時觸發(fā),無論是否失敗
5.onloadstart:文件開始讀取時觸發(fā)
6.onprogress:當文件讀取時,周期性地觸發(fā)
有了這些方法以后,就可以處理文件了。
先來試試讀取文本文件:
function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/text\/\w+/.test(file.type)) {
reader.onload = function() {
$('<pre>' + this.result + '</pre>').appendTo('body');
}
reader.readAsText(file);
}
}
}
這里的this.result實際上就是reader.result,也就是讀取出來的文件內(nèi)容。
測試一下你會發(fā)現(xiàn)這個文件的內(nèi)容被添加到網(wǎng)頁中了。如果是用Chrome的話,必須把網(wǎng)頁放在服務(wù)器上或插件里,file協(xié)議下會失敗。
再來試試圖片,因為瀏覽器可以直接顯示Data URI協(xié)議的圖片,所以這次就添加圖片:
function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/text\/\w+/.test(file.type)) {
reader.onload = function() {
$('<pre>' + this.result + '</pre>').appendTo('body');
}
reader.readAsText(file);
} else if(/image\/\w+/.test(file.type)) {
reader.onload = function() {
$('<img src="' + this.result + '"/>').appendTo('body');
}
reader.readAsDataURL(file);
}
}
}
其實input:file控件還支持選擇多個文件:
<input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>
這樣handleFiles()里就需要遍歷處理files了。
如果只想讀取部分數(shù)據(jù)的話,F(xiàn)ile對象還有webkitSlice()或mozSlice()方法,用于生成Blob對象。這個對象可以和File對象一樣被FileReader讀取。這2個方法接收3個參數(shù):第1個參數(shù)是起始位置;第2個是結(jié)束位置,省略時則讀到文件結(jié)尾;第3個是content type。
例子可以參考《Reading local files in JavaScript》。
當然,除了導入數(shù)據(jù)和顯示文件以外,它還可以用來做AJAX上傳,代碼可以參考《Using files from web applications》。
接下來說保存文件。
實際上File API: Writer提供了4個接口,但目前只有部分瀏覽器(Chrome 8+和Firefox 4+)實現(xiàn)了BlobBuilder,其余接口都不可用。
對于不支持的瀏覽器,可以使用BlobBuilder.js和FileSaver.js來獲得支持。
我研究了一下,發(fā)現(xiàn)了其中的奧秘。
BlobBuilder可以創(chuàng)建一個Blob對象。把這個Blob對象傳遞給URL.createObjectURL()方法,就可以拿到一個object URL。而這個object URL就是這個Blob對象的下載地址。
拿到下載地址后,創(chuàng)建一個a元素,將下載地址賦值給href屬性,文件名賦值給download屬性(Chrome 14+支持)。
然后再創(chuàng)建一個click事件,交給這個a元素處理,就會導致瀏覽器開始下載這個Blob對象了。
最后,用URL.revokeObjectURL()來釋放這個object URL,通知瀏覽器可以不必繼續(xù)引用這個文件了。
下面就是一段化簡的代碼:
var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;
function saveAs(blob, filename) {
var type = blob.type;
var force_saveable_type = 'application/octet-stream';
if (type && type != force_saveable_type) { // 強制下載,而非在瀏覽器中打開
var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
blob = slice.call(blob, 0, blob.size, force_saveable_type);
}
var url = URL.createObjectURL(blob);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
URL.revokeObjectURL(url);
}
var bb = new BlobBuilder;
bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');
測試時會提示保存一個文本文件。Chrome需要把網(wǎng)頁放在服務(wù)器上或插件里。
相關(guān)文章
關(guān)于JAVASCRIPT urldecode URL解碼的問題
JS要實現(xiàn)單純的編碼解碼輕而易舉,escape、unescape就搞定,但是遇到不是完整的URL轉(zhuǎn)碼,就沒辦法了2012-01-01解決使用attachEvent函數(shù)時,this指向被綁定的元素的問題的方法
解決使用attachEvent函數(shù)時,this指向被綁定的元素的問題的方法...2007-08-08javaScript給元素添加多個class的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨avaScript給元素添加多個class的簡單實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07ComboBox(下拉列表框)通過url加載調(diào)用遠程數(shù)據(jù)的方法
這篇文章主要介紹了ComboBox(下拉列表框)通過url加載調(diào)用遠程數(shù)據(jù)的方法 ,需要的朋友可以參考下2017-08-08基于JavaScript FileReader上傳圖片顯示本地鏈接
這篇文章主要為大家詳細介紹了基于JavaScript FileReader上傳圖片顯示本地鏈接的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05利用CSS、JavaScript及Ajax實現(xiàn)高效的圖片預加載
圖片預加載想必大家都不陌生吧,實現(xiàn)預加載圖片有很多方法,包括使用CSS、JavaScript及兩者的各種組合。這些技術(shù)可根據(jù)不同設(shè)計場景設(shè)計出相應(yīng)的解決方案,十分高效2013-10-10