文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用JS操作文件

2023-06-22 00:16

关注

这篇文章主要讲解了“如何使用JS操作文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用JS操作文件”吧!

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事件。该事件在读取操作发生错误时触发。

标准方法

基本使用

文件的准备read.txt(随便读取电脑的文件都可以)

如何使用JS操作文件

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事件。该事件在读取操作被中断时触发。')  }})}

结果如下

如何使用JS操作文件

重要结果分析:

node操作文件(readfile)

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

node怎么读取文件(安装node可以直接忽略看代码)

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

结果

如何使用JS操作文件

文件读取是一个异步操作

当我们读取多个文件,发现使用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操作文件”的内容了,经过本文的学习后,相信大家对如何使用JS操作文件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯