首頁 > web前端 > js教程 > 主體

JS如何讀取和保存檔案?方法介紹

青灯夜游
發布: 2021-02-14 09:01:59
轉載
5301 人瀏覽過

JS如何讀取和保存檔案?方法介紹

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

##  Text readAsAsAs(file,  readAs(file,) ):將文件讀為文本,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() {
                $(&#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控制也支援選擇多個檔案:       

<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 = &#39;application/octet-stream&#39;;
    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(&#39;http://www.w3.org/1999/xhtml&#39;, &#39;a&#39;);
    save_link.href = url;
    save_link.download = filename;
    var event = document.createEvent(&#39;MouseEvents&#39;);
    event.initMouseEvent(&#39;click&#39;, 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(&#39;Hello, world!&#39;);
saveAs(bb.getBlob(&#39;text/plain;charset=utf-8&#39;), &#39;hello world.txt&#39;);
登入後複製

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

更多编程相关知识,请访问:编程教学!!

以上是JS如何讀取和保存檔案?方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板