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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
React中Ref 的使用方法详解
Apr 28 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对象和数组相互转换的方法
2015/05/12 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
python文件的md5加密方法
2016/04/06 Python
Python实现句子翻译功能
2017/11/14 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
医学生实习自荐信
2013/10/01 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
农村党员对照检查材料
2014/09/24 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014年关工委工作总结
2014/11/17 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
创业计划书之物流运送
2019/09/17 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android