用JavaScript讀取和保存檔案

? ? ? 因為Google還不提供同步插件資料的功能，所以導入和匯出插件設定就必須和檔案打交道了。而出於安全原因，只有IE才提供存取文件的API；但隨著HTML?5的到來，其他瀏覽器也紛紛支援了。

? ? ? 先說讀取文件。 W3C提供了一些File?API，其中最重要的是FileReader這個類別。

? ? ? 先列出需要用到的HTML標籤： ? ??

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

? ? 的函數(shù)當選項。

? ? ? 這個FileList物件類似一個數(shù)組，可以知道檔案的數(shù)目，而它的元素就是File物件了。

? ? ?從這個File物件可以取得name、size、lastModifiedDate和type等屬性。

? ? ? 把這個File物件傳給FileReader物件的讀取方法，就能讀取檔案了。

? ? ? FileReader共有4種讀取方法：

? ? ? readAsArrayBuffer(file)：將檔案讀取為ArrayBuffer。

? ? ? readAsBinaryString(file)：讀取檔案為二進位字串

? ? ? readAsDataURL(file)：讀取檔案為Data?URL

?值為'UTF-8'

? ? ? 此外，abort()方法可以停止讀取檔案。

? ? ? FileReader物件在讀取檔案後，還需要處理。為了無法阻塞目前線程，API採用了事件模型，可以註冊這些事件：

? ? ? onabort：中斷時觸發(fā)

? ? ? onerror：出錯時觸發(fā)

?時觸發(fā)，無論是否失敗

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

? ? ? 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() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body'); } reader.readAsText(file); } } }

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

? ? ? 測試一下你會發(fā)現(xiàn)這個檔案的內(nèi)容被加入到網(wǎng)頁中了。如果是用Chrome的話，必須把網(wǎng)頁放在伺服器或插件裡，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() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body'); } reader.readAsText(file); } else if(/image/w+/.test(file.type)) { reader.onload = function() { $('').appendTo('body'); } reader.readAsDataURL(file); } } }

? ? ? 其實input:file需要遍歷處理files了。

? ? ? 如果只想讀取部分資料的話，F(xiàn)ile物件還有webkitSlice()或mozSlice()方法，用於產(chǎn)生Blob物件。這個物件可以和File物件一樣被FileReader讀取。這2個方法接收3個參數(shù)：第1個參數(shù)是起始位置；第2個是結(jié)束位置，省略時則讀到文件結(jié)尾；第3個是content?type。

? ? ? 範例可參考《Reading?local?files?in?JavaScript》。

當然，除了匯入資料和顯示檔案以外，它也可以用來做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可以建立一個Blob物件。把這個Blob物件傳遞給URL.createObjectURL()方法，就可以拿到一個object?URL。而這個object?URL就是這個Blob物件的下載位址。

? ? ? 拿到下載位址後，建立一個a元素，將下載位址賦值給href屬性，檔案名稱賦值給download屬性（Chrome?14+支援）。

? ? ? 然後再建立一個click事件，交給這個a元素處理，就會導致瀏覽器開始下載這個Blob物件了。

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

下面就是一段化簡的程式碼：

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

? ? ? 測試時會提示儲存一個文字檔案。 Chrome需要把網(wǎng)頁放在伺服器或插件裡。

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

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

美文美圖

?

以上就是JavaScript進階(六)用JavaScript讀取和保存文件的內(nèi)容，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！