前言,文件读取是提高应用体验度的必须接口,应用场景中需求很频繁。

Js处理文件读取,由于处于安全方面的考虑,在2000年以前,都是以“<input type="file">”字段来实现文件上传,这样有很多的局限性,比如无法在本地上传时看到自己上传的文件(如图片),也无法读取到文件内容,审查文件流大小。

HTML5中,主流浏览器引擎都支持新的FILE API,为“<input type="file">”提供一个files数组,包含每个文件,为每个文件对象提供4个属性:name,size,type,lastModifiedDate,分别表示文件的名称,文件流大小,MIME类型和上次被修改的时间。在实际应用中,有时为了控制上传文件的大小,通过size就可以在前端提示用户选择合适范围内大小的文件。

HTML5提供了一个原型FileReader,通过该原型的实例可以得到4个主要的方法:

  1. readAsText(file,encoding),以纯文本形式读取文件,将读取的文本保存到该实例对象的result属性中。第二个参数指定编码类型,是可选的;
  2. readeAsDataURL(file),读取文件并将文件以数据URI的形式保存在result属性中;
  3. readAsBinaryString(file),读取文件并将一个字符串保存在result属性中,字符串中的每个字符表示一字节。
  4. readAsArrayBuffer(file):读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

其中,通过readAsDataUrl(file)可以读取到文件地址,如果是图片文件,可以结合src属性显示图片文件,

具体实例可以参考实例:https://github.com/Johnharvy/html-dom-tools/.

由于文件读取加载的过程是异步的,即文件加载读取是需要排队等待时间的,所以FileReader也提供了几个事件,用于在文件加载的各个阶段触发,分别为process,error和load,分别表示是否又读取了新数据,是否发生了错误以及是否已经读完了整个文件。

每次过50ms,就会触发一次process事件,每次process事件都可以通过FileReader的result属性读取到文件的相关内容。

如果由于某些原因无法读取文件,就会触发error事件并默认带一个参数code,有1,2,3,4,5个状态值,分别表示未找到文件,安全性错误,读取中断,文件不可读,编码错误。

文件加载成功后,会触发load事件,如果已发生error事件,就不再触发load事件。

详解Js中文件读取机制的更多相关文章

  1. 详解js中的闭包

    前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式 ...

  2. 详解js中的寄生组合式继承

    寄生组合式继承是js中最理想的继承方式, 最大限度的节省了内存空间. js中的寄生组合式继承要求是: 1.子对象有父对象属性的副本, 且这些不应该保存在子对象的prototype上.       2. ...

  3. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  4. 详解js中的apply与call的用法

    前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受 ...

  5. 详解JS中Number()、parseInt()和parseFloat()的区别

    三者的作用: Number(): 可以用于任何数据类型转换成数值: parseInt().parseFloat(): 专门用于把字符串转换成数值: 一.Number( ): (1)如果是Boolean ...

  6. 详解 JS 中 new 调用函数原理

    JavaScript 中经常使用构造函数创建对象(通过 new 操作符调用一个函数),那在使用 new 调用一个函数的时候到底发生了什么?先看几个例子,再解释背后发生了什么. 1)看三个例子 1.1 ...

  7. 详解js中的this指向

    this指向问题是个老生常谈的问题了,现在我给大家一个例子 var obj={ bar:'Cynthia' , foo:function(){ console.log(this.bar,"w ...

  8. 详解JS中 call 方法的实现

    摘要:本文将全面的,详细解析call方法的实现原理 本文分享自华为云社区<关于 JavaScript 中 call 方法的实现,附带详细解析!>,作者:CoderBin. 本文将全面的,详 ...

  9. 转载 《AngularJS》5个实例详解Directive(指令)机制

    <AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...

随机推荐

  1. 守护进程demon.c

    1 #include <stdio.h> #include <unistd.h> #include <errno.h> #include <time.h> ...

  2. [Linux] Linux指令汇总(持续更新中...)

    写在前面: 以前真心没有玩过Linux系统,总感觉整天摆弄Linux的同学都是大牛.如今,在公司里实习需要远程登录Linux服务器,所有的代码都要在开发板上完成,所以被逼无奈也不得不定下心来好好学学L ...

  3. Less的简单使用

    在浏览器中使用LESSCSS 浏览器端使用是在使用LESS开发时最直观的一种方式.如果是在生产环境中,尤其是对性能要求比较高的场合,建议使用node或者其它第三方工具先编译成CSS再上线使用. 浏览器 ...

  4. SqlServer数据库大型应用解决方案总结

    随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的互联网应用,每天百万级甚至上亿的PV无疑对数据库造成了相当高的负载.对于系统的稳定性和扩展性造成了极大的问题. 一 ...

  5. 字符串专题:map POJ 1002

    第一次用到是在‘校内赛总结’扫地那道题里面,大同小异 map<string,int>str 可以专用做做字符串的匹配之类的处理 string donser; str [donser]++ ...

  6. linux下编译安装vim7.4并安装clang_complete插件

    linux下编译安装vim7.4并安装clang_complete插件 因为debian里软件仓库中下载安装的vim是不支持python写的插件的(可以打开vim,在命令模式先输入:py测试一下),导 ...

  7. python基础一

    1.1 Python优点 1.简单.优雅.明确 2.强大的模块三方库 3.易移植 4.面向对象 5.可扩展(c\java\c#...) 1.2 Python缺点 1.代码不能加密 2.速度慢   1. ...

  8. Socket通信(二)

    程序下载地址: http://download.csdn.net/detail/u010312811/9683748 1.基本流程 服务器:(1)用指定的端口号和服务器的IP建立一个EndPoint对 ...

  9. poj 3264(线段树)

    http://poj.org/problem?id=3264 初学线段可以做的水题,也是线段树的基础运用.也是我的第一个线段树的题. 题意:在区间范围内的最大值减去最小值 思路:线段树记录下每个区间内 ...

  10. orm 语法 数据库连接、建表、增删改查、回滚、单键关联 、多键关联、三表关联

    1.数据库连接, #!usr/bin/env/python # -*- coding:utf-8 -*- # from wangteng import sqlalchemy from sqlalche ...