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 多行文本框(textarea)高度变化
Jul 03 Javascript
js的2种继承方式详解
Mar 04 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
JS二分查找算法详解
Nov 01 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
js操作二进制数据方法
2018/03/03 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python3数字求和的实例
2019/02/19 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
高一地理教学反思
2014/01/18 职场文书