JavaScript讀取和保存文件

因?yàn)镚oogle還不提供同步插件數(shù)據(jù)的功能，所以導(dǎo)入和導(dǎo)出插件配置就必須和文件打交道了。而出于安全原因，只有IE才提供訪問文件的API；但隨著HTML 5的到來，其他瀏覽器也紛紛支持了。

首先說讀取文件。W3C提供了一些File API，其中最重要的是FileReader這個(gè)類。

先列出需要用到的HTML標(biāo)簽：

 <input type="file" id="file" onchange="handleFiles(this.files)"/>

當(dāng)選擇了一個(gè)文件時(shí)，就會(huì)把包含這個(gè)文件的列表（一個(gè)FileList對(duì)象）作為參數(shù)傳給handleFiles()函數(shù)了。

這個(gè)FileList對(duì)象類似一個(gè)數(shù)組，可以知道文件的數(shù)目，而它的元素就是File對(duì)象了。

從這個(gè)File對(duì)象可以獲取name、size、lastModifiedDate和type等屬性。

把這個(gè)File對(duì)象傳給FileReader對(duì)象的讀取方法，就能讀取文件了。

FileReader共有4種讀取方法：

readAsArrayBuffer(file)：將文件讀取為ArrayBuffer。

readAsBinaryString(file)：將文件讀取為二進(jìn)制字符串

readAsDataURL(file)：將文件讀取為Data URL

readAsText(file, [encoding])：將文件讀取為文本，encoding缺省值為'UTF-8'

此外，abort()方法可以停止讀取文件。

FileReader對(duì)象在讀取文件后，還需要進(jìn)行處理。為了不阻塞當(dāng)前線程，API采用了事件模型，可以注冊(cè)這些事件：

onabort：中斷時(shí)觸發(fā)

onerror：出錯(cuò)時(shí)觸發(fā)

onload：文件成功讀取完畢時(shí)觸發(fā)

onloadend：文件讀取完畢時(shí)觸發(fā)，無論是否失敗

onloadstart：文件開始讀取時(shí)觸發(fā)

onprogress：當(dāng)文件讀取時(shí)，周期性地觸發(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);         }     } }

   <span style="font-family: Arial, Helvetica, sans-serif;">這里的this.result實(shí)際上就是reader.result，也就是讀取出來的文件內(nèi)容。</span>

測(cè)試一下你會(huì)發(fā)現(xiàn)這個(gè)文件的內(nèi)容被添加到網(wǎng)頁中了。如果是用Chrome的話，必須把網(wǎng)頁放在服務(wù)器上或插件里，file協(xié)議下會(huì)失敗。

再來試試圖片，因?yàn)闉g覽器可以直接顯示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);         }     } }

其實(shí)input:file控件還支持選擇多個(gè)文件：

<input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>

這樣handleFiles()里就需要遍歷處理files了。

如果只想讀取部分?jǐn)?shù)據(jù)的話，F(xiàn)ile對(duì)象還有webkitSlice()或mozSlice()方法，用于生成Blob對(duì)象。這個(gè)對(duì)象可以和File對(duì)象一樣被FileReader讀取。這2個(gè)方法接收3個(gè)參數(shù)：第1個(gè)參數(shù)是起始位置；第2個(gè)是結(jié)束位置，省略時(shí)則讀到文件結(jié)尾；第3個(gè)是content type。

當(dāng)然，除了導(dǎo)入數(shù)據(jù)和顯示文件以外，它還可以用來做AJAX上傳，代碼可以參考《Using files from web applications》。

保存文件

實(shí)際上File API: Writer提供了4個(gè)接口，但目前只有部分瀏覽器（Chrome 8+和Firefox 4+）實(shí)現(xiàn)了BlobBuilder，其余接口都不可用。

對(duì)于不支持的瀏覽器，可以使用BlobBuilder.js和FileSaver.js來獲得支持。

我研究了一下，發(fā)現(xiàn)了其中的奧秘。

BlobBuilder可以創(chuàng)建一個(gè)Blob對(duì)象。把這個(gè)Blob對(duì)象傳遞給URL.createObjectURL()方法，就可以拿到一個(gè)object URL。而這個(gè)object URL就是這個(gè)Blob對(duì)象的下載地址。

拿到下載地址后，創(chuàng)建一個(gè)a元素，將下載地址賦值給href屬性，文件名賦值給download屬性（Chrome 14+支持）。

然后再創(chuàng)建一個(gè)click事件，交給這個(gè)a元素處理，就會(huì)導(dǎo)致瀏覽器開始下載這個(gè)Blob對(duì)象了。

最后，用URL.revokeObjectURL()來釋放這個(gè)object URL，通知瀏覽器可以不必繼續(xù)引用這個(gè)文件了。

下面就是一段化簡(jiǎn)的代碼：

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) { // 強(qiáng)制下載，而非在瀏覽器中打開         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');

測(cè)試時(shí)會(huì)提示保存一個(gè)文本文件。Chrome需要把網(wǎng)頁放在服務(wù)器上或插件里。

附:寫文件工具類(干貨)

	/** 	* 寫文件 	* @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);        }  	}