站長資訊網
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。
當然，除了導入數據和顯示文件以外，它還可以用來做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); } }
