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

 更新时间:2021年12月09日 09:33:58   作者:前端薛之谦...  
这篇文章主要介绍了使用JS操作文件(FileReader读取--node的fs),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascript Array对象使用小结

    javascript Array对象使用小结

    数组是一段线性分配的内存,它通过整数去计算偏移并访问其中的元素。数组是很快的数据结构,但不幸的是,Javascript并没有像这种数组一样的数据结构。
    2009-12-12
  • Js实现中国公民身份证号码有效性验证实例代码

    Js实现中国公民身份证号码有效性验证实例代码

    这篇文章主要介绍了Js实现中国公民身份证号码有效性验证实例代码,可以识别身份证号码的正确性,有兴趣的可以了解一下
    2017-05-05
  • javascript瀑布流布局实现方法详解

    javascript瀑布流布局实现方法详解

    这篇文章主要介绍了javascript瀑布流布局实现方法,结合实例形式较为详细的分析了JavaScript实现瀑布流布局的样式与具体功能代码,需要的朋友可以参考下
    2016-02-02
  • js实现指定时间倒计时效果

    js实现指定时间倒计时效果

    这篇文章主要为大家详细介绍了js实现指定时间倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • JavaScript中原型链存在的问题解析

    JavaScript中原型链存在的问题解析

    本文通过实例给大家介绍js原型链存在的问题解析,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • 8个JavaScript条件语句优化小技巧分享

    8个JavaScript条件语句优化小技巧分享

    在日常的开发中,我们经常会编写一些条件语句,过多的 if...else会导致代码难以理解和维护,今天小编来分享几个优化条件语句的小技巧,希望对大家有所帮助
    2022-07-07
  • JS实现提示效果弹出及延迟隐藏的功能

    JS实现提示效果弹出及延迟隐藏的功能

    这篇文章主要介绍了JS实现提示效果弹出及延迟隐藏的功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • JS的执行机制(EventLoop、宏任务和微任务)

    JS的执行机制(EventLoop、宏任务和微任务)

    这篇文章主要介绍了JS的执行机制(EventLoop、宏任务和微任务),具有很好的参考价值,希望对大家有所帮助。
    2023-01-01
  • js上下视差滚动简单实现代码

    js上下视差滚动简单实现代码

    这篇文章主要为大家详细介绍了js上下视差滚动的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 前端js弹出框组件使用方法

    前端js弹出框组件使用方法

    这篇文章主要为大家详细介绍了前端js弹出框组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论