JavaScript進階(六)用JavaScript讀取並儲存文件

用JavaScript讀取和保存檔案

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

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

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

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

    的函數當選項。

      這個FileList物件類似一個數組，可以知道檔案的數目，而它的元素就是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：中斷時觸發

      onerror：出錯時觸發

 時觸發，無論是否失敗

      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() {
                $(&#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，也就是读取出来的文件内容。</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() {
                $(&#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了。

      如果只想讀取部分資料的話，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，通知瀏覽器可以不必繼續引用這個文件了。

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

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

      測試時會提示儲存一個文字檔案。 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);
       } 
	}

美文美图

 

以上就是JavaScript进阶(六)用JavaScript读取和保存文件的内容，更多相关内容请关注PHP中文网（www.php.cn）！