欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用JS操作文件(FileReader讀取--node的fs)

 更新時(shí)間:2021年12月09日 09:33:58   作者:前端薛之謙...  
這篇文章主要介紹了使用JS操作文件(FileReader讀取--node的fs),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

JS讀取文件 FileReader

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

文檔

FileReader

事件和方法

事件處理

FileReader.onabort 處理abort事件。該事件在讀取操作被中斷時(shí)觸發(fā)。
FileReader.onerror 處理error事件。該事件在讀取操作發(fā)生錯(cuò)誤時(shí)觸發(fā)。
FileReader.onload 處理load事件。該事件在讀取操作完成時(shí)觸發(fā)。
FileReader.onloadstart 處理loadstart事件。該事件在讀取操作開始時(shí)觸發(fā)。
FileReader.onloadend 處理loadend事件。該事件在讀取操作結(jié)束時(shí)(要么成功,要么失?。┯|發(fā)。
FileReader.onprogress 處理error事件。該事件在讀取操作發(fā)生錯(cuò)誤時(shí)觸發(fā)。

標(biāo)準(zhǔn)方法

  • FileReader.abort()

中止讀取操作。在返回時(shí),readyState屬性為DONE。

  • FileReader.readAsArrayBuffer()

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

  • FileReader.readAsDataURL()

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

  • FileReader.readAsText()

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

基本使用

文件的準(zhǔn)備read.txt(隨便讀取電腦的文件都可以)

文件的讀取

HTML結(jié)構(gòu)

<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方法(讀取結(jié)果普通文本)
			reader.readAsText(this.files[0]) 
			// 讀取成功的結(jié)果:已經(jīng)成功讀取文件(計(jì)算機(jī)上的文件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和文件–或則準(zhǔn)備更大的文件;效果會更好)

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("加載結(jié)束")
  			}
  			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('出錯(cuò)了')
  			}
  			reader.onerror = function(){
    			console.log('處理abort事件。該事件在讀取操作被中斷時(shí)觸發(fā)。')
  			}
		})
	}

結(jié)果如下

事件處理的結(jié)果

重要結(jié)果分析:

  • 狀態(tài)1(readyState):數(shù)據(jù)正在被加載
  • 狀態(tài)2:已完成全部的讀取請求.
  • 當(dāng)然狀態(tài)為0(readyState)表示還沒有加載任何數(shù)據(jù).
  • 每過50ms左右,就會觸發(fā)一次progress事件;也就是說這個(gè)可能多次觸發(fā),onload事件在onloadend之前觸發(fā)。
  • 由于種種原因無法讀取文件時(shí),會觸發(fā)error事件。觸發(fā)error事件時(shí),相關(guān)信息保存在FileReader對象的error屬性中,這個(gè)屬性將保存一個(gè)對象,此對象只有一個(gè)屬性code,即錯(cuò)誤碼。1表示未找到文件,2表示安全性錯(cuò)誤,3表示讀取中斷,4表示文件不可讀,5表示編碼錯(cuò)誤。
  • 如果想中斷讀取過程,可以調(diào)用abort方法,就會觸發(fā)abort事件。在返回時(shí),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. 讀取文件
//    第一個(gè)參數(shù)就是要讀取的文件路徑
//    第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)
//        成功
//          data 數(shù)據(jù)
//          error null
//        失敗
//          data undefined沒有數(shù)據(jù)
//          error 錯(cuò)誤對象
fs.readFile('read.txt', function (error, data) {
  // 在這里就可以通過判斷 error 來確認(rèn)是否有錯(cuò)誤發(fā)生
  if (error) {
    console.log('讀取文件失敗了')
  } else {
    console.log(data.toString())
  }
})

結(jié)果

node讀取文件

文件讀取是一個(gè)異步操作

當(dāng)我們讀取多個(gè)文件,發(fā)現(xiàn)使用readfile讀取文件并不能一定按順序打印結(jié)果,所以這是一個(gè)異步操作,如何順序讀取文件。

使用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('寫入成功了')
  }
})

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript Array對象使用小結(jié)

    javascript Array對象使用小結(jié)

    數(shù)組是一段線性分配的內(nèi)存,它通過整數(shù)去計(jì)算偏移并訪問其中的元素。數(shù)組是很快的數(shù)據(jù)結(jié)構(gòu),但不幸的是,Javascript并沒有像這種數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)。
    2009-12-12
  • Js實(shí)現(xiàn)中國公民身份證號碼有效性驗(yàn)證實(shí)例代碼

    Js實(shí)現(xiàn)中國公民身份證號碼有效性驗(yàn)證實(shí)例代碼

    這篇文章主要介紹了Js實(shí)現(xiàn)中國公民身份證號碼有效性驗(yàn)證實(shí)例代碼,可以識別身份證號碼的正確性,有興趣的可以了解一下
    2017-05-05
  • javascript瀑布流布局實(shí)現(xiàn)方法詳解

    javascript瀑布流布局實(shí)現(xiàn)方法詳解

    這篇文章主要介紹了javascript瀑布流布局實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)瀑布流布局的樣式與具體功能代碼,需要的朋友可以參考下
    2016-02-02
  • js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果

    js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • JavaScript中原型鏈存在的問題解析

    JavaScript中原型鏈存在的問題解析

    本文通過實(shí)例給大家介紹js原型鏈存在的問題解析,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧
    2016-09-09
  • 8個(gè)JavaScript條件語句優(yōu)化小技巧分享

    8個(gè)JavaScript條件語句優(yōu)化小技巧分享

    在日常的開發(fā)中,我們經(jīng)常會編寫一些條件語句,過多的?if...else會導(dǎo)致代碼難以理解和維護(hù),今天小編來分享幾個(gè)優(yōu)化條件語句的小技巧,希望對大家有所幫助
    2022-07-07
  • JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能

    JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能

    這篇文章主要介紹了JS實(shí)現(xiàn)提示效果彈出及延遲隱藏的功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • JS的執(zhí)行機(jī)制(EventLoop、宏任務(wù)和微任務(wù))

    JS的執(zhí)行機(jī)制(EventLoop、宏任務(wù)和微任務(wù))

    這篇文章主要介紹了JS的執(zhí)行機(jī)制(EventLoop、宏任務(wù)和微任務(wù)),具有很好的參考價(jià)值,希望對大家有所幫助。
    2023-01-01
  • js上下視差滾動簡單實(shí)現(xiàn)代碼

    js上下視差滾動簡單實(shí)現(xiàn)代碼

    這篇文章主要為大家詳細(xì)介紹了js上下視差滾動的簡單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • 前端js彈出框組件使用方法

    前端js彈出框組件使用方法

    這篇文章主要為大家詳細(xì)介紹了前端js彈出框組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12

最新評論