H5 API 实现文件读取操作

该接口通过FileReader对象来读取本地存储的文件,然后使用File对象来指定读取的文件或数据

File对象

  • 可以是来自用户在一个元素上(如<input>)选择文件后返回的FileList对象

  • 可以是自由拖放操作生成的DataTransfer对象

    (dataTransfer对象只能访问文件的一些基本的信息。)

文件的上传

由于Web环境的特殊性,为了考虑文件安全问题,浏览器不允许JavaSctipt直接访问文件系统,使用<input>表单元素的文件域\<input type="file">来实现文件的上传。

input元素还有一个multiple属性(HTML 5新增),可以实现一次上传多个文件。在用户选择文件以后,可以得到一个FileList对象,它代表所选的文件列表。

查看FileList对象

  1. <input type="file" multiple>
  2. <script>
  3. var file = document.querySelector('input');
  4. file.onchange = function() { // 当用户选择文件后执行此事件
  5. console.log(this.files); // 查看FileList对象
  6. };
  7. </script>

FileList对象代表所选的文件列表,该对象是一个类数组的形式,其中包含一个或多个File对象。如果用户只选择了一个上传文件,那么只需要访问FileList对象的第一个元素,如果FileList对象是类数组对象,可以使用for循环遍历其内部的File对象

  1. for(var i = 0, numFiles = files.length; i < numFiles; i++){
  2. var files = files[i];

  3. }

在使用FileReader对象前,需要使用new来实例化FileReader()构造函数,获得一个对象。然后通过这个对象的方法和事件,来实现文件的读取等不同的功能。

无论文件是否读取成功,读取文件的方法都不会返回读取的结果,而是将读取结果存储到result属性中。

FileReader对象的常用方法

方法名称 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[ending] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 中断读取操作

FileReader对象的常用事件

事件名称 描述
onabort 读取中断时触发
onerror 读取发生错误时触发
onloadstart 读取开始时触发
onprogress 正在读取时触发
onload 读取成功时触发
onloadend 读取完成时触发(无论成功或失败)

FileReader对象的使用

上传图片并显示略缩图
  1. <input type="file" multiple>
  2. <div><img alt="null"></div>
  3. <script>
  4. var file = document.querySelector('input');
  5. file.onchange = function () { // 当用户选择文件后执行此事件
  6. console.log(this.files); // 查看FileList对象
  7. };
  8. //初始化盒子模型
  9. var img= document.querySelector('img');
  10. file.onchange = function () {
  11. // ① 初始化reader对象
  12. var reader = new FileReader();
  13. // ② 读取文件内容
  14. reader.readAsDataURL(this.files[0]); // 方式2:读取图片的缩略图
  15. // ③ 将读取的内容显示到页面中
  16. reader.onload = function () { // 读取成功时触发
  17. img.src = this.result; // 将生成的内容赋值为img图片的src
  18. };
  19. }
  20. </script>

上传文档并显示文本
  1. <input type="file" multiple>
  2. <div>
  3. </div>
  4. <script>
  5. var file = document.querySelector('input');
  6. var div= document.querySelector('div');
  7. file.onchange = function () {// 当用户选择文件后执行此事件
  8. console.log(this.files); // 查看FileList对象
  9. var reader = new FileReader();// ① 初始化reader对象
  10. reader.readAsText(this.files[0]);// ② 读取文件内容:读取文本
  11. // ③ 将读取的内容显示到页面中
  12. reader.onload = function () { // 读取成功时触发
  13. console.log('成功');
  14. div.innerHTML = this.result; // 将生成的内容显示到页面的div元素中
  15. };
  16. }
  17. </script>

【前端】【H5 API】实现文件读取操作的更多相关文章

  1. Perl中文件读取操作

    Perl中文件读取操作 http://blog.csdn.net/yangxuan12580/article/details/51506216

  2. java 的文件读取操作

    /** * @param filePath 文件的全路径 * 返回我们读取到的文件内容 * **/ public static String readFile(String filePath) { F ...

  3. python文件读取操作、序列化

    1.对文件进行读写操作时,先建立文件句柄 f = open("test.txt","r",encoding="UTF-8") 其中,r为文件 ...

  4. PHP大文件读取操作

    简单的文件读取,一般我们会使用 file_get_contents() 这类方式来直接获取文件的内容.不过这种函数有个严重的问题是它会把文件一次性地加载到内存中,也就是说,它会受到内存的限制.因此,加 ...

  5. C# 图片 等 文件 读取操作 的一点提示

    源于:在读取图片时,总喜欢首先采用:Image img=Image.FromFile("");操作,这种方式由于 调用图片的程序与图片文件是通过 绝对地址关联的,会造成 当前进程或 ...

  6. API内部文件读取

    直接上代码吧 尝试将项目复制后建一个新的项目,结果总是有问题,不过可以把原项目转换为新项目,方法如下: 1.项目右键在android tools 有个 rename application packa ...

  7. Python学习日记之文件读取操作

    Python内置了文件读写的函数open,read 用法示例: open('/home/root/files.txt ') 在打开文件后,操作完成后可以使用close()关闭文件,但比较好的文件读写方 ...

  8. 后端返回字符流,前端处理进行excel文件导出操作

    针对于这种的文件导出,最关键的是响应类型的设置,也就是responseType的设置(responseType:"arraybuffer"或者responseType:" ...

  9. day08 学习小测试 九九乘法表 车牌划分计算 大文件读取操作

    1.1需求:读取一个100G的文件,检测文件中是否有关键字keys=['苍老师','小泽老师',"alex"], 如果有则替换成"***",并写入到另一个文件中 ...

  10. HDFS的Java API 对文件的操作

    在本次操作中所用到的命令 1.首先启动HDFS $HADOOP_HOME/sbin/start-dfs.sh 2.关防火墙 切换到root用户,执行service iptables stop 3.拷贝 ...

随机推荐

  1. USB 端点和管道的区别

    在USB体系架构中,经常会混用USB端点和USB管道的概念,包括本人也经常混用.但严格来说它们是两个不同的概念,具体表现在: 端点是USB设备端的概念,是真实的特理设备上的概念,其特性是通过端点描述符 ...

  2. 【Simpleperf】Android的CPU分析,性能优化利器

    很多时候,写代码是一件很爽的事情,但最后需要对APP进行瘦身.性能分析却是一件很棘手的事情.当需要对APP的性能进行分析时,Simpleperf是一个简单快捷的选择. 正文开始前,先奉上官方的资料: ...

  3. 【ARMv8基础篇】CCI-400控制器简介

    CCI(Cache Coherent Interconnect)是ARM中的cache一致性控制器. CCI-400将互连和一致性功能结合到一个模块中.它支持多达两个ACE 主节点的连接,例如: Co ...

  4. Linux:/proc/meminfo参数详细解释

    Linux:/proc/meminfo参数详细解释 一.Linux内存总览图 二.meminfo参数的详细介绍 /proc/meminfo是了解Linux系统内存使用状况的主要接口,我们最常用的&qu ...

  5. EDGE 浏览器占用内存优化

    windows + s 搜索 service 打开服务 : 找到下面 edge 三项 双击 把启动类型都改成 手动触发

  6. kotlin协程——>组合挂起函数

    默认顺序调用 假设我们在不同的地⽅定义了两个进⾏某种调⽤远程服务或者进⾏计算的挂起函数.我们只假设它们都是有⽤的,但是实际上它们在这个⽰例中只是为了该⽬的⽽延迟了⼀秒钟: suspend fun do ...

  7. 云原生爱好者周刊:PromLabs 开源 PromQL 可视化工具 PromLens

    开源项目推荐 PromLens PromLabs 开源了旗下的 PromQL 可视化工具 PromLens,它可以通过图形化的方式展示 PromQL 的语法特征,对相关查询参数进行解释,并提供告警和常 ...

  8. Machine Learning Week_9 Anomaly Detection and Recommend System

    1. Anomaly Detection I'd like to tell you about a problem called Anomaly Detection. This is a reason ...

  9. 经验总结之 _DEBUGGER _01 _Invalid coercion null-node{} as xsstring _20210909

    经验总结之 _DEBUGGER _01 _Invalid coercion null-node{} as xsstring _20210909 今天喜提一个bug,报错情况如下: 该项目使用的是 sp ...

  10. dotnet core微服务框架Jimu ~ 会员授权微服务

    提供授权服务,用户使用会员的用户名和密码获取 token, 带着 token 访问受保护的接口,如浏览和发布新闻. 有 2 个公开的 api: token: 获取 token; GetCurrentM ...