广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用JS操作文件(FileReader读取--node的fs)
  • 762
分享到

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

2024-04-02 19:04:59 762人浏览 泡泡鱼
摘要

目录js读取文件 FileReader文档事件和方法基本使用事件处理node操作文件(readfile)文件读取是一个异步操作使用Promise文件的写入JS读取文件 FileRea

JS读取文件 FileReader

FileReader 对象允许WEB应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

文档

FileReader

事件和方法

事件处理

FileReader.onabort 处理abort事件。该事件在读取操作被中断时触发。
FileReader.onerror 处理error事件。该事件在读取操作发生错误时触发。
FileReader.onload 处理load事件。该事件在读取操作完成时触发。
FileReader.onloadstart 处理loadstart事件。该事件在读取操作开始时触发。
FileReader.onloadend 处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。
FileReader.onprogress 处理error事件。该事件在读取操作发生错误时触发。

标准方法

  • 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= function(){
  				console.log("onloadend状态"+this.readyState)
    			console.log("加载结束")
  			}
  			reader.onprogress = function(){
  				count++;
  				console.log("onprogress状态"+this.readyState)
    			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)

根据以上可知,浏览器中的 javascript 是没有文件操作的能力的(基于安全,不能直接操作本地文件),但是 Node 中的 JavaScript 具有文件操作的能力

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())
  }
})

结果

node读取文件

文件读取是一个异步操作

当我们读取多个文件,发现使用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('写入成功了')
  }
})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 使用JS操作文件(FileReader读取--node的fs)

本文链接: https://www.lsjlt.com/news/159471.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 使用JS操作文件(FileReader读取--node的fs)
    目录JS读取文件 FileReader文档事件和方法基本使用事件处理node操作文件(readfile)文件读取是一个异步操作使用Promise文件的写入JS读取文件 FileRea...
    99+
    2022-11-12
  • js利用FileReader读取本地文件或者blob方式
    目录FileReader读取本地文件或blob一、FileReader的使用二、FileReader的方法三、FileReader的属性四、FileReader的事件使用FileRe...
    99+
    2022-11-12
  • JS前端使用Blob和File读取文件的操作代码
    目录Blob创建 Blob 类型的对象1. new Blob()2. blob.slice()Blob 对象的属性Blob 应用实例FileFileReader构造函数属性事件方法实...
    99+
    2022-11-13
    js使用Blob和File读取文件 js读取文件
  • 一文聊聊node文件的读写操作
    本篇文章带大家聊聊fs文件系统模块,介绍一下node中的文件读取写入操作,希望对大家有所帮助!fs文件系统模块什么是fs文件系统模块fs模块是node.js官方提供的、操作文件的模块。通过fs模块可以实现对文件的读取以及写入操作。【相关教程...
    99+
    2023-05-14
    node Node.js
  • node文件的读写操作有哪些
    本文小编为大家详细介绍“node文件的读写操作有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“node文件的读写操作有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。fs文件系统模块什么是fs文件系统模块...
    99+
    2023-07-04
  • 使用BufferedReader读取本地文件的操作
    BufferedReader读取本地文件 在使用BufferedWriter写入文件时,如果忘记关闭文件(close)同时也没有调用flush(),则被写入的文件中是没有内容的。 在...
    99+
    2022-11-12
  • python3 文件的读取和通用操作
    import os           # 当前操作目录,os.chdir() 切换操作目录 >>> import os >>> os.getcwd() 'C:\\ProgramFiles\\Pyth...
    99+
    2023-01-31
    操作 文件
  • Python3读取文件的操作详解
    目录1、引言2、 fileinput2.1 方法介绍2.2 默认读取2.3 处理一个文件2.4 处理批量文件2.5 读取与备份2.5 重定向替换2.6 进阶3、总结1、引言 小鱼:小...
    99+
    2022-11-11
  • node.js中fs核心模块读写文件操作的示例分析
    这篇文章将为大家详细讲解有关node.js中fs核心模块读写文件操作的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。node.js 里fs模块常用的功能实现文件的...
    99+
    2022-10-19
  • node里的filesystem模块文件读写操作详解
    目录一、是什么二、文件知识权限位 mode标识位文件描述为 fd三、方法文件读取fs.readFileSyncfs.readFile文件写入writeFileSyncwriteFil...
    99+
    2022-11-13
  • C#文件操作、读取文件、Debug/Trace类用法
    1、文件操作 这段代码在 System.Private.CoreLib 下,对 System.IO.File 中的代码进行精简,供 CLR 使用。 当使用文件时,...
    99+
    2022-11-13
  • Nodejs读取文件时相对路径的正确写法(使用fs模块)
    在开发Nodejs中,我们往往最常用的模块就是fs核心模块(fs.readFile)来读取文件。代码如下: 但是运行之后,并没有按照想象中一样,读取test.html文件内容,这是一个bug,坑爹的玩意,...
    99+
    2022-06-04
    写法 路径 模块
  • 基于node.js的fs核心模块读写文件操作(实例讲解)
    node.js 里fs模块 常用的功能 实现文件的读写 目录的操作 - 同步和异步共存 ,有异步不用同步 - fs.readFile 都不能读取比运行内存大的文件,如果文件偏大也不会使用readFile方...
    99+
    2022-06-04
    实例 模块 核心
  • pandas 读取excel文件的操作代码
    目录一 read_excel() 的基本用法二 read_excel() 的常用的参数:三 示例1. IO:路径2. sheet_name:指定工作表名3. header :指定标题...
    99+
    2022-11-12
  • js使用xlsx读取excel文件的详细步骤
    目录下载安装插件文件基础获取文件对象读取文件数据读取Excel通过xlsx获取workbookWorkBook介绍读取WorkBook导出Excel生成sheet总结下载安装插件 n...
    99+
    2022-11-13
  • 如何使用JS操作文件
    这篇文章主要讲解了“如何使用JS操作文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用JS操作文件”吧!JS读取文件 FileReaderFileReader 对象允许Web应用程序...
    99+
    2023-06-22
  • Node中的fs文件模块和path路径模块怎么使用
    这篇“Node中的fs文件模块和path路径模块怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Node中的fs文件模...
    99+
    2023-07-04
  • Python读取配置文件的实战操作
    目录一、 yaml1、 准备2、 操作数据2.1 读取数据二、 ini1、准备2、 操作数据2.1 读取数据2.2. 写数据三、 xml1、 准备2、 操作数据2.1 读取数据2.2...
    99+
    2023-05-14
    python读取配置文件 python如何读取配置文件 python 配置文件读取
  • android文件操作——读取assets和raw文件下的内容
    来自Resources和Assets 中的文件只可以读取而不能进行写的操作。 assets文件夹里面的文件都是保持原始的文件格式,需要用AssetManager以字节流的形式...
    99+
    2022-06-06
    raw文件 Android
  • java使用GeoTools读取shp文件并画图的操作代码
    GeoTools是ArcGis地图与java对象的桥梁,恰如jdbc之于oracle与java。 shp文件本身是存有地理对象边界坐标、对象中心城市及城市编号的多多边形字符串。 需要...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作