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 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
php 获取客户端的真实ip
2009/11/30 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
javascript时间差插件分享
2016/07/18 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
开源Web应用框架Django图文教程
2017/03/09 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python移位运算的实现
2019/07/15 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
公司企业表扬信
2014/01/11 职场文书
草船借箭教学反思
2014/02/03 职场文书
幼儿园老师寄语
2014/04/03 职场文书
科学发展观演讲稿
2014/09/11 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
防暑降温通知书
2015/04/27 职场文书