HTML5-FileReader的使用方法

FileReader是一个文件读取对象，它有四个方法：

1.readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8

2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储

3.readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。

4.abort():中断读取。

用法：

1.先创建文件读取对象

var reader=new FileReader();

2.读取文件

var file=$("#myFile").files;/*网页上传的文件存储在file表单元素的files属性中，
它是一个数组（说明可以上传多个文件）*/
   reader.readAsDataURL(file[0]);/*此方法没有返回值，读取完文件之后，它会将读取
   的结果存储在文件读取对象的result中，即可以通过reader.result获取到文件的URL*/

3.获取数据

        /*获取数据*/
        /*FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
        * onabort:读取文件中断片时触发
        * onerror:读取错误时触发
        * onload:文件读取成功完成时触发
        * onloadend:读取完成时触发，无论成功还是失败
        * onloadstart:开始读取时触发
        * onprogress:读取文件过程中持续触发*/
        reader.onload=function(){
            /*展示*/
            $("img")[0].src=reader.result;/*这句话的意思是：比如我们在网页上传了一张图片，
            在上传之后，马上就可以在网页上看到自己上传得图片，做到了即时预览的效果*/
        };
        
		//显示上传进度
		reader.onprogress=function(e){
            var percent= e.loaded/ e.total*100+"%";
            div.style.width=percent;
        }

以上就是H5中FileReader的使用方法，结合js使用可以实现即时预览等效果。