html5之filereader的使用

《html5之filereader的使用》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、HTML5之FileReader的使用分类：Web开发2013-05-2322:463662人阅读评论(0)收藏举报JavaScriptFileReaderHTML5上传预览进度条HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：1.检测浏览器对FileReader的支持[javascript]viewplaincopyprint?1.if(window.FileReader

2、) {  2.    var fr = new FileReader();  3.    // add your code here  4.}  5.else {  6.    alert("Not supported by your browser!");  7.}  if(window.FileReader){varfr=newFileReader();//addyourcodehere}else{alert("Notsupportedbyyourbrowser!");}2.调用FileReader对象的方法FileReader的实例拥有4个方法，其中3个用以读取文件，另一个用

3、来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。方法名参数描述abortnone中断读取readAsBinaryStringfile将文件读取为二进制码readAsDataURLfile将文件读取为DataURLreadAsTextfile,[encoding]将文件读取为文本readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。readAsBinaryStrin

4、g：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以data:开头的字符串，这段字符串的实质就是DataURL，DataURL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与html等格式的文件。3.处理事件FileReader包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。事件描述onabort中断时触发onerror出错时触发onload文件读取成功完成时触发onloadend读取完成触发，无论成功或失败onloads

5、tart读取开始时触发onprogress读取中文件一旦开始读取，无论成功或失败，实例的result属性都会被填充。如果读取失败，则result的值为null，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。[javascript]viewplaincopyprint?1.fr.onload = function() {  2.    this.result;  3.};  fr.onload=function(){this.result;};下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。[html]viewplaincopypri

6、nt?1.  2.        function showPreview(source) {  3.            var file = source.files[0];  4.            if(window.FileReader) {  5.                var fr = new FileReader();  6.                fr.onloadend = function(e) {  7.                    document.getElem

7、entById("portrait").src = e.target.result;  8.                };  9.                fr.readAsDataURL(file);  10.            }  11.        }  12.      13.  14.  15.