JavaScript读取本地文件常用方法流程解析


Posted in Javascript onOctober 12, 2020

出于安全和隐私的原因,web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件,可以通过使用input file和FileReader来实现。在这篇文章中,我们将通过一些例子来看看它是如何工作的。

文件操作的流程

获取文件

由于浏览器中的 JS 无法从用户的设备访问本地文件,我们需要为用户提供一种方法来选择一个或多个文件供我们使用。这可以通过文件选择器<input type='fule' />来完成。

<input type="file">

如果想允选择多个文件,可以添加multiple属性:

<input type="file" multiple>

我们可以通过change事件来监听文件的选择,也可以添加另一个 UI 元素让用户显式地开始对所选文件的处理。

input file 具有一个files属性,该属性是File对象的列表(可能有多个选择的文件)。

JavaScript读取本地文件常用方法流程解析

File对象如下所示:

JavaScript读取本地文件常用方法流程解析读取文件

读取文件,主要使用的是[FileReader][1]类。

「该对象拥有的属性:」

「FileReader.error」:只读,一个DOMException,表示在读取文件时发生的错误 。

「FileReader.readyState」:只读 表示 FileReader 状态的数字。取值如下:

常量名值描述EMPTY0还没有加载任何数据LOADING1数据正在被加载DONE2已完成全部的读取请求

「FileReader.result」:只读,文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。

「该对象拥有的方法:」

readAsText(file, encoding):以纯文本形式读取文件,读取到的文本保存在result属性中。第二个参数代表编码格式。

readAsDataUrl(file):读取文件并且将文件以数据URI的形式保存在result属性中。

readAsBinaryString(file):读取文件并且把文件以字符串保存在result属性中。

readAsArrayBuffer(file):读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。

FileReader.abort():中止读取操作。在返回时,readyState属性为DONE。

「文件读取的过程是异步操作,在这个过程中提供了三个事件:progress、error、load事件。」

progress:每隔50ms左右,会触发一次progress事件。

error:在无法读取到文件信息的条件下触发。

load:在成功加载后就会触发。

在下面的示例中,我们将使用readAsText和readAsDataURL方法来显示文本和图像文件的内容。

例一:读取文本文件

为了将文件内容显示为文本,change需要重写一下:

JavaScript读取本地文件常用方法流程解析

首先,我们要确保有一个可以读取的文件。如果用户取消或以其他方式关闭文件选择对话框而不选择文件,我们就没有什么要读取和退出函数。

然后我们继续创建一个FileReader。reader的工作是异步的,以避免阻塞主线程和 UI 更新,这在读取大文件(如视频)时非常重要。

reader发出一个'load'事件(例如,类似于Image对象),告诉我们的文件已经读取完毕。

reader将文件内容保存在其result属性中。此属性中的数据取决于我们使用的读取文件的方法。在我们的示例中,我们使用readAsText方法读取文件,因此result将是一个文本字符串。

例二:显示本地选择的图片

如果我们想要显示图像,将文件读取为字符串并不是很有用。FileReader有一个readAsDataURL方法,可以将文件读入一个编码的字符串,该字符串可以用作<img>元素的源。本例的代码与前面的代码基本相同,区别是我们使用readAsDataURL读取文件并将结果显示为图像:

JavaScript读取本地文件常用方法流程解析总结

1)由于安全和隐私的原因,JavaScript 不能直接访问本地文件。

2)可以通过 input 类型为 file 来选择文件,并对文件进行处理。

3) file input 具有带有所选文件的files属性。

4) 我们可以使用FileReader来访问所选文件的内容。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
javascript打开word文档的方法
Apr 16 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
js实现导航吸顶效果
Feb 24 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
Three.JS实现三维场景
Dec 30 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
vue实现移动端返回顶部
Oct 12 #Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 #Javascript
手机浏览器唤起微信分享(JS)
Oct 11 #Javascript
js canvas实现俄罗斯方块
Oct 11 #Javascript
利用js canvas实现五子棋游戏
Oct 11 #Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 #Javascript
原生js生成图片验证码
Oct 11 #Javascript
You might like
Phpbean路由转发的php代码
2008/01/10 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
php文件上传简单实现方法
2015/01/24 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
基于php编程规范(详解)
2017/08/17 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
浅析return false的正确使用
2013/11/04 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python3 实现口罩抽签的功能
2020/03/11 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
出生医学证明样本
2014/01/17 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android