如何使用JS操作文件

這篇文章主要講解了“如何使用JS操作文件”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用JS操作文件”吧！

JS讀取文件 FileReader

FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。

文檔

FileReader

事件和方法

事件處理

標準方法

• FileReader.abort()

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

• FileReader.readAsArrayBuffer()

• 開始讀取指定的 Blob中的內(nèi)容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數(shù)據(jù)對象.

• FileReader.readAsDataURL()

• 開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內(nèi)容。

• FileReader.readAsText()

• 開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含一個字符串以表示所讀取的文件內(nèi)容。

基本使用

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

HTML結構

<input type="file" multiple>

JS調(diào)用

<script>
	window.onload = function(){
		var inpFile = document.querySelector('input[type=file]')
		inpFile.addEventListener('change', function(){
			var reader = new FileReader()
			// 發(fā)送異步請求
			// 0.使用readAsText方法（讀取結果普通文本）
			reader.readAsText(this.files[0]) 
			// 讀取成功的結果：已經(jīng)成功讀取文件（計算機上的文件read.txt）
			reader.onload = function(){
    		//讀取完成后，數(shù)據(jù)保存在對象的result屬性中
    		console.log(this.result)//打?。阂呀?jīng)成功讀取文件
  			}
		})
	}
</script>

JS調(diào)用使用其它方法（其它方法也是一樣使用）

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調(diào)用（還是使用上面的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狀態(tài)"+this.readyState)
    			console.log("開始加載")
  			}
  			reader.onloadend= function(){
  				console.log("onloadend狀態(tài)"+this.readyState)
    			console.log("加載結束")
  			}
  			reader.onprogress = function(){
  				count++;
  				console.log("onprogress狀態(tài)"+this.readyState)
    			console.log("加載中"+count)
  			}
			reader.onload = function(){
    			console.log("onload拿到的數(shù)據(jù)為"+this.result)
    			console.log("狀態(tài)"+this.readyState)
  			}
  			reader.onerror = function(){
    			console.log('出錯了')
  			}
  			reader.onerror = function(){
    			console.log('處理abort事件。該事件在讀取操作被中斷時觸發(fā)。')
  			}
		})
	}

結果如下

重要結果分析：

• 狀態(tài)1(readyState):數(shù)據(jù)正在被加載

• 狀態(tài)2：已完成全部的讀取請求.

• 當然狀態(tài)為0（readyState）表示還沒有加載任何數(shù)據(jù).

• 每過50ms左右，就會觸發(fā)一次progress事件；也就是說這個可能多次觸發(fā)，onload事件在onloadend之前觸發(fā)。

• 由于種種原因無法讀取文件時，會觸發(fā)error事件。觸發(fā)error事件時，相關信息保存在FileReader對象的error屬性中，這個屬性將保存一個對象，此對象只有一個屬性code，即錯誤碼。1表示未找到文件，2表示安全性錯誤，3表示讀取中斷，4表示文件不可讀，5表示編碼錯誤。

• 如果想中斷讀取過程，可以調(diào)用abort方法，就會觸發(fā)abort事件。在返回時，readyState屬性為DONE。一般用于后臺的操作。

node操作文件(readfile)

根據(jù)以上可知，瀏覽器中的 JavaScript 是沒有文件操作的能力的（基于安全，不能直接操作本地文件），但是 Node 中的 JavaScript 具有文件操作的能力

node怎么讀取文件（安裝node可以直接忽略看代碼）

• 首先要安裝node環(huán)境(很簡單，網(wǎng)上很多教程)，最好也安裝nodemon

• 打開你的cmd，也可以使用git

• 創(chuàng)建JS文件

• 加載node的核心模塊

• 使用readFile

• 在cmd輸入node 文件名.js

// 1. 使用 require 方法加載 fs 核心模塊
var fs = require('fs')
// 2. 讀取文件
//    第一個參數(shù)就是要讀取的文件路徑
//    第二個參數(shù)是一個回調(diào)函數(shù)
//        成功
//          data 數(shù)據(jù)
//          error null
//        失敗
//          data undefined沒有數(shù)據(jù)
//          error 錯誤對象
fs.readFile('read.txt', function (error, data) {
  // 在這里就可以通過判斷 error 來確認是否有錯誤發(fā)生
  if (error) {
    console.log('讀取文件失敗了')
  } else {
    console.log(data.toString())
  }
})

結果

文件讀取是一個異步操作

當我們讀取多個文件，發(fā)現(xiàn)使用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')
  })
  .then(function (data) {
    console.log(data)
  })

文件的寫入

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

感謝各位的閱讀，以上就是“如何使用JS操作文件”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對如何使用JS操作文件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！