JavaScript進階(六)用JavaScript讀取和儲存檔案
用JavaScript讀取和儲存檔案
因為Google還不提供同步外掛資料的功能,所以匯入和匯出外掛配置就必須和檔案打交道了。而出於安全原因,只有IE才提供訪問檔案的API;但隨著HTML 5的到來,其他瀏覽器也紛紛支援了。
首先說讀取檔案。W3C提供了一些File API,其中最重要的是FileReader這個類。
先列出需要用到的HTML標籤:
<input type="file" id="file" onchange="handleFiles(this.files)"/>
當選擇了一個檔案時,就會把包含這個檔案的列表(一個FileList物件)作為引數傳給handleFiles()函數了。
這個FileList物件類似一個數組,可以知道檔案的數目,而它的元素就是File物件了。
從這個File物件可以獲取name、size、lastModifiedDate和type等屬性。
把這個File物件傳給FileReader物件的讀取方法,就能讀取檔案了。
FileReader共有4種讀取方法:
readAsArrayBuffer(file):將檔案讀取為ArrayBuffer。
readAsBinaryString(file):將檔案讀取為二進位制字串
readAsDataURL(file):將檔案讀取為Data URL
readAsText(file, [encoding]):將檔案讀取為文字,encoding預設值為'UTF-8'
此外,abort()方法可以停止讀取檔案。
FileReader物件在讀取檔案後,還需要進行處理。為了不阻塞當前執行緒,API採用了事件模型,可以註冊這些事件:
onabort:中斷時觸發
onerror:出錯時觸發
onload:檔案成功讀取完畢時觸發
onloadend:檔案讀取完畢時觸發,無論是否失敗
onloadstart:檔案開始讀取時觸發
onprogress:當檔案讀取時,週期性地觸發
有了這些方法以後,就可以處理檔案了。
讀取檔案
先來試試讀取文字檔案:
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);
}
}
}
<span style="font-family: Arial, Helvetica, sans-serif;">這裡的this.result實際上就是reader.result,也就是讀取出來的檔案內容。</span>
測試一下你會發現這個檔案的內容被新增到網頁中了。如果是用Chrome的話,必須把網頁放在伺服器上或外掛裡,file協議下會失敗。
再來試試圖片,因為瀏覽器可以直接顯示Data URI協議的圖片,所以這次就新增圖片:
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了。
如果只想讀取部分資料的話,File物件還有webkitSlice()或mozSlice()方法,用於生成Blob物件。這個物件可以和File物件一樣被FileReader讀取。這2個方法接收3個引數:第1個引數是起始位置;第2個是結束位置,省略時則讀到檔案結尾;第3個是content type。
例子可以參考《Reading local files in JavaScript》。
當然,除了匯入資料和顯示檔案以外,它還可以用來做AJAX上傳,程式碼可以參考《Using files from web applications》。
儲存檔案
實際上File API: Writer提供了4個介面,但目前只有部分瀏覽器(Chrome 8+和Firefox 4+)實現了BlobBuilder,其餘介面都不可用。
對於不支援的瀏覽器,可以使用BlobBuilder.js和FileSaver.js來獲得支援。
我研究了一下,發現了其中的奧祕。
BlobBuilder可以建立一個Blob物件。把這個Blob物件傳遞給URL.createObjectURL()方法,就可以拿到一個object URL。而這個object URL就是這個Blob物件的下載地址。
拿到下載地址後,建立一個a元素,將下載地址賦值給href屬性,檔名賦值給download屬性(Chrome 14+支援)。
然後再建立一個click事件,交給這個a元素處理,就會導致瀏覽器開始下載這個Blob物件了。
最後,用URL.revokeObjectURL()來釋放這個object URL,通知瀏覽器可以不必繼續引用這個檔案了。
下面就是一段化簡的程式碼:
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需要把網頁放在伺服器上或外掛裡。
附:寫檔案工具類(乾貨)
/**
* 寫檔案
* @param fileName 檔名
* @param data 檔案流
* @param path 寫入路徑
* @return boolean
*/
public static boolean writeFile(String fileName,String data,String path) {
try {
// System.out.println("fileContent:" + data);
File file = new File(path + fileName);
if(!file.exists()){
file.createNewFile();
}
FileOutputStream outStream = new FileOutputStream(file);
outStream.write(data.getBytes());
outStream.flush();
outStream.close();
outStream = null;
return(true);
} catch (Exception e) {
e.printStackTrace();
return(false);
}
}
美文美圖