HTML5 FileReader API 测试（一）

2019独角兽企业重金招聘Python工程师标准>>>

参考文章

html5之FileReader接口

http://zhangyaochun.iteye.com/blog/1487900

1、FileReader接口的作用：

用来把文件读入内存，并且读取文件中的数据。

2、支持情况

FF3.6+| Chrome6+

Js代码

/*检测方式*/
if(typeof FileReader == 'undefined'){
//不支持
}else{
//支持
}

3、FileReader接口的方法

readAsBinaryString(file) ------ 将文件读取二进制码

通常我们将它传送到后端，后端可以通过这段字符串存储文件

readAsText(file,[encoding]) ------ 将文件读取文本

第二个参数是 文本的编码方式，默认UTF-8

readAsDataURL(file) ------ 将文件读取为DataURL

将文件读取为一串Data URL字符串，将小文件以一种特殊格式的URL地址直接读入页面。

小文件指图像与html等格式的文件

abort() ------- 中断读取操作

4、FileReader接口的事件

onabort ---------数据读取中断时触发
onerror ---------数据读取出错时触发
onloadstart --------数据读取开始时触发
onprocess --------数据读取中
onload --------数据读取成功完成时触发
onloadend --------数据读取完成时触发，无论成功失败

http://lucifinilhades.iteye.com/blog/1197826

HTML5文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" dir="ltr"><head><meta charset="UTF-8" /><title>HTML5 Filesystem API Demo</title><script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="../js/fileReader.js"></script></head><body><header><h1>HTML5文件API示例</h1></header><section><form id="filelist_sample" name="filelist_sample"><label for="selectFiles">请选择文件（可多选）：</label><input type="file" name="selectFiles" id="selectFiles" multiple="multiple"/>  <button type="button" id="showInfoBtn" name="showInfoBtn">显示文件信息</button><br/>  <button type="button" id="txtBtn" name="txtBtn">测试 readAsText</button>  <button type="button" id="binBtn" name="binBtn">测试 readAsBinaryString</button>  <button type="button" id="urlBtn" name="urlBtn">测试 readAsDataURL</button>  </form><div id="fileContent"></div><footer><table id="info"><caption>文件信息</caption><thead><tr><th>ID</th><th>文件名</th><th>文件类型</th><th>文件大小（KB）</th><th>最后修改日期</th></tr></thead><tfoot><tr><th>合计：</th><th><meter id="count" value="0" min="0" max="10">0</meter></th>  <th></th>  <th><meter id="sum" value="0" min="0" >0</meter></th>  <th><button type="button" id="clearBtn">清除信息</button></th>  </tr></tfoot></table></footer></section><footer><div id="console"></div></footer>  </body>
</html>

fileReader.js文件如下

//typeof Fileif(typeof FileReader == "undefined") {alert("您的浏览器未实现FileReader接口！");
}//给jQuery提供访问FileList对象的功能
jQuery.fn.files = function() {return this[0].files;
};//“显示文件信息”按钮的click事件代码
$(function() {$("#showInfoBtn").click(function(event) {$("#clearBtn").click();var fileObjs = $("#selectFiles").files();var sum = 0, count = 1;var tbody = $("<tbody>");for ( var index = 0; index < fileObjs.length; index++) {$("<tr>").append($("<td>").append("<meter>").val(count).text(count)).append($("<td>").text(fileObjs[index].name)).append($("<td>").text(fileObjs[index].type)).append($("<td>").append($("<meter>").val(fileObjs[index].size).text(fileObjs[index].size / 1024))).append($("<td>").text(fileObjs[index].lastModifiedDate)).appendTo(tbody);sum += fileObjs[index].size;count++;}$("td>meter, #sum").attr("max", 5 * 1024 * 1024);$("#info>thead").after(tbody);$("#count").attr("max", "10").val(fileObjs.length).text(fileObjs.length);$("#sum").val(sum).text(sum / 1024);});
});$(function() {$("#clearBtn").click(function(event) {$("#info>tbody, #fileContent, #console").empty();$("#count, #sum").val(0).text(0);});
});//三个按钮的click事件代码
$(function() {$("#txtBtn").click(function(event) {$("#selectFiles").readAsText(handler);//$("#selectFiles").readAsText($("#selectFiles").files(),"UTF-8");});$("#binBtn").click(function(event) {$("#selectFiles").readAsBinaryString(handler);});$("#urlBtn").click(function(event) {$("#selectFiles").readAsDataURL(handler);});
});//传入的事件处理器函数代码var createTag = function(txt) {$("#console").append($("<span>").text(txt).after("<br/>"));};var handler = {load : function(event) {createTag("this is FileReader's onload event.");$("<p>").append(event.target.result).appendTo("#fileContent");},loadStart : function(event) {createTag("this is FileReader's onloadstart event.");},loadEnd : function(event) {createTag("this is FileReader's onloadend event.");},abort : function(event) {createTag("this is FileReader's onabort event.");},error : function(event) {createTag("this is FileReader's onerror event.");},progress : function(event) {createTag("this is FileReader's onprogress event.");}};var getFileReader = function(handler) {var reader = new FileReader();//var reader = FileReader(handler);reader.onloadstart = handler.loadStart;reader.onprogress = handler.progress;reader.onload = handler.load;reader.onloadend = handler.loadEnd;reader.onabort = handler.abort;reader.onerror = handler.error;return reader;};jQuery.fn.readAsText = function(handler, encoding) {if (typeof encoding == "undefined") {encoding = "UTF-8";}var files = this.files();var reader = null;for ( var i = 0; i < files.length; i++) {//alert(files[i].name);reader = getFileReader(files[i]);if (!/text\/\w+/.test(files[i].type)) {reader.onload=createTag("Loading ..." + files[i].name);reader.loadEnd=createTag("Loading have  End!" + files[i].name);} else {reader.onload=createTag("Loading ..." + files[i].name);reader.readAsText(files[i], encoding);alert(reader.result);$("#fileContent").append($("<span>" + files[i].name + "<br>" + reader.result +"<br/>"));reader.loadEnd=createTag("Loading have  End!" + files[i].name);}}return this;
};jQuery.fn.addText= function(txt) {var createTag = function(txt) {$("#console").append($("<span>").text(txt).after("<br/>"));}
};jQuery.fn.readAsBinaryString = function(handler) {var files = this.files();var reader = null;for ( var i = 0; i < files.length; i++) {reader = getFileReader(handler);reader.readAsBinaryString(files[i]);}return this;
};jQuery.fn.readAsDataURL = function(handler) {var files = this.files();var reader = null;var imageHandler = function(event) {$("<img>").attr("src", event.target.result).appendTo("#fileContent");};for ( var i = 0; i < files.length; i++) {reader = getFileReader(handler);if (!/image\/\w+/.test(files[i].type)) {reader.readAsDataURL(files[i]);} else {reader.onload = imageHandler;reader.readAsDataURL(files[i]);}}return this;
};

在不同的浏览器测试效果不同，特别是测试readAsText

火狐12.0测试效果最佳