详解Js中文件读取机制

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

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事件。

时间: 07-03

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

详解js中typeof、instanceof与constructor

详解js中typeof.instanceof与constructor typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function.语法为typeof(data) 或 typeof data instanceof则为判断一个对象是否为某一数据类型,或一个变量是否为一个对象的实例;返回boolean类型 语法为 o instanceof A 以下为综合实例: 1<script type

node.js中文件读取方式中流方式

1.node.js中文件读取流方式: var fs=require("fs"); var data; var s1=fs.createReadStream("input.txt"); s1.on("data",function(txt){ data+=txt; }) s1.on("end",function(){ console.log("文件流式读取成功!") }) 2.管道方式: var fs=requ

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

转载:详解JS中Number().parseInt()和parseFloat()的区别 三者的作用: Number(): 可以用于任何数据类型转换成数值: parseInt().parseFloat(): 专门用于把字符串转换成数值: 一.Number( ): (1)如果是Boolean值,true和false将分别转换为1和0. (2)如果是数字值,只是简单的传入和返回. (3)如果是null值,返回0. (4)如果是undefined,返回NaN. (5)如果是字符串,遵循下列规则: 如果字

详解js中的闭包

前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式,深入讲解一下对于闭包的理解,如果有不对请指正. 写在闭包之前 闭包的内部细节,依赖于函数被调用过程所发生的一系列事件为基础,所以有必要先弄清楚以下几个概念: 1. 执行环境和活动对象 ** - 执行环境(execution context)定义了变量或者函数有权访问的其他数据,每个执行环境都有一个与之关联的

详解UCOS中的任务调度机制

本文和大家分享的主要是ucos 任务调度机制相关内容,一起来看看吧,希望对大家 学习ucos有所帮助. 一个操作系统内核提供的最核心的功能就是任务的调度机制,操作系统的内核调度机制有大体有两种,一种是时间片轮番调度,就是将一个系统周期分为好几段,第一段时间执行第一个任务,第二段时间执行第二个任务.... 每一段时间都执行相应的任务.一种就是抢占式实时内核,即优先级最高的任务优先运行,不论什么时候,只要就绪的任务中有比当前正在执行的任务优先级更高的任务,就暂停当前的任务去执行优先级最高的任务. U

详解js中的apply与call的用法

前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受参数的方式不太一样. 方法定义applyFunction.apply(obj,args)方法能接收两个参数: obj:这个对象将代替Function类里this对象 args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数. call call方法与apply方法的第

详解 JS 中 new 调用函数原理

JavaScript 中经常使用构造函数创建对象(通过 new 操作符调用一个函数),那在使用 new 调用一个函数的时候到底发生了什么?先看几个例子,再解释背后发生了什么. 1)看三个例子 1.1 无 return 语句 构造函数最后没有 return 语句,这也是使用构造函数时默认情况,最后会返回一个新对象,如下: function Foo(age) { this.age = age; } var o = new Foo(111); console.log(o); 这是常见的使用构造函数创建

(转)web.config详解之在文件中配置网站默认页面

在<configuration></configuration>中添加下面的配置 <system.webServer>        <defaultDocument>            <files>                <clear />                <add value="index.aspx" />                <add value=&qu

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

转自大漠穷秋:http://damoqiongqiu.iteye.com/blog/1917971 感谢作者分享! <AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请期待口令:Angular 1.一点小说明 指令的作用:实现语义化标签 我们常用的HTML标签是这样的: <div> <span>一点点内容</span> &l