目錄

• 讀取檔案 FileReader
• 文件
• 事件和方法
• 基本使用
• 事件處理
• node操作檔案(readfile)
• 檔案讀取是一個非同步操作
• 使用Promise
• 檔案的寫入

JS讀取檔案 FileReader

FileReader 物件允許Web應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用 File 或 Blob 物件指定要讀取的檔案或資料。

文件

FileReader

事件和方法

事件處理

標準方法

• FileReader.abort()

中止讀取操作。在返回時，readyState屬性為DONE。

• FileReader.readAsArrayBuffer()

開始讀取指定的 Blob中的內容,一旦完成,result 屬性中儲存的將是被讀取檔案的 ArrayBuffer 資料物件.

• FileReader.readAsDataURL()

開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的字串以表示所讀取檔案的內容。

• FileReader.readAsText()

開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個字串以表示所讀取的檔案內容。

基本使用

檔案的準備read.txt（隨便讀取電腦的檔案都可以）

HTML結構

<input type="file" multiple>

JS呼叫

<script>
	window.onload = function(){
		var inpFile = document.querySelector('input[type=file]')
		inpFile.addEventListener('change',function(){
			var reader = new FileReader()
			// 傳送非同步請求
			// 0.使用readAsText方法（讀取結果普通文字）
			reader.readAsText(this.files[0]) 
			// 讀取成功的結果：已經成功讀取檔案（計算機上的檔案read.txt）
			reader.onload = function(){
    		//讀取完成後，資料儲存在物件的result屬性中
    		console.log(this.result)//列印：已經成功讀取檔案
  			}
		})
	}
</script>

JS呼叫使用其它方法（其它方法也是一樣使用）

readAsDataURL

window.onload = function(){
		var inpFile = document.querySelector('input[type=file]')
		inpFile.addEventListener('change',function(){
			var reader = new FileReader()
			// 使用readAsDataURL（獲取base64編碼）
			reader.readAsDataURL(this.files[0])
			reader.onload = function(){
    		console.log(this.result)
    		//data:text/plain;base64,5bey57uP5oiQ5Yqf6K+75Y+W5paH5Lu2
  			}
		})
	}

事件處理

JS呼叫（還是使用上面的html和檔案–或則準備更大的檔案；效果會更好）

window.onload = function(){
		var inpFile = document.querySelector('input[type=file]')
		inpFile.addEventListener('change',function(){
			var reader = new FileReader()
			reader.readAsText(this.files[0])
			var count = 0;
			reader.onloadstart = function(){
				console.log("onloadstart狀態"+this.readyState)
    			console.log("開始載入")
  			}
  			reader.onloadend= functiQpJYWnEVGOon(){
  				console.log("onloadend狀態"+this.readyState)
    			console.log("載入結束")
  			}
  			reader.onprogress = function(){
  				count++;
  				console.log("onprogress狀態"+this.http://www.cppcns.comreadyState)
    			console.log("載入中"+count)
  			}
			reader.onload = function(){
    			console.log("onload拿到的資料為"+this.result)
    			console.log("狀態"+this.readyState)
  			}
  			reader.onerror = function(){
    			console.log('出錯了')
  			}
  			reader.onerror = function(){
    			console.log('處理abort事件。該事件在讀取操作被中斷時觸發。')
  			}
		})
	}

結果如下

重要結果分析：

• 狀態1(readyState):資料正在被載入
• 狀態2：已完成全部的讀取請求.
• 當然狀態為0（readyState）表示還沒有載入任何資料.
• 每過50ms左右，就會觸發一次progress事件；也就是說這個可能多次觸發，onload事件在onloadend之前觸發。
• 由於種種原因無法讀取檔案時，會觸發error事件。觸發error事件時，相關資訊儲存在FileReader物件的error屬性中，這個屬性將儲存一個物件，此物件只有一個屬性code，即錯誤碼。1表示未找到檔案，2表示安全性錯誤，3表示讀取中斷，4表示檔案不可讀，5表示編碼錯誤。
• 如果想中斷讀取過程，可以呼叫abort方法，就會觸發abort事件。在返回時，readyState屬性為DONE。一般用於後臺的操作。

node操作檔案(readfile)

根據以上可知，瀏覽器中的 是沒有檔案操作的能力的（基於安全，不能直接操作本地檔案），但是 Node 中的 Script 具有檔案操作的能力

node怎麼讀取檔案（安裝node可以直接忽略看程式碼）

• 首先要安裝node環境(很簡單，網上很多教程)，最好也安裝nodemon
• 開啟你的cmd，也可以使用git
• 建立JS檔案
• 載入node的核心模組
• 使用readFile
• 在cmd輸入node 檔名.js

// 1. 使用 require 方法載入 fs 核心模組
var fs = require('fs')
// 2. 讀取檔案
//    第一個引數就是要讀取的檔案路徑
//    第二個引數是一個回撥函式
//        成功
//          data 資料
//          error null
//        失敗
//          data undefined沒有資料
//          error 錯誤物件
fs.readFile('read.txt',function (error,data) {
  // 在這裡就可以通過判斷 error 來確認是否有錯誤發生
  if (error) {
    console.log('讀取檔案失敗了')
  } else {
    console.log(data.toString())
  }
})

結果

檔案讀取是一個非同步操作

當我們讀取多個檔案，發現使用readfile讀取檔案並不能一定按順序列印結果，所以這是一個非同步操作，如何順序讀取檔案。

使用Promise

var fs = require('fs')
function pReadFile(filePath) {
  return new Promise(function (resolve,reject) {
    fs.readFile(filePath,'utf8',function (err,data) {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}
pReadFile('./data/a.txt')
  .then(function (data) {
    console.log(data)
    return pReadFile('./data/b.txt')
  })
  .then(function (data) {
    console.log(data)
    return pReadFile('./data/c.txt')
http://www.cppcns.com  })
  .then(function (data) {
    console.log(data)
  })

檔案的寫入

fs.writeFile('read.txt','大家好，給大家介紹一下，我是檔案寫入',function (error) {
  if (error) {
    console.log('寫入失敗')
  } else {
    console.log('寫入成功了')
  }
})

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。