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测试效果最佳

Opera 12.00 beta 测试截图

Chrome 19测试截图

转载于:https://my.oschina.net/u/559991/blog/60310

HTML5 FileReader API 测试（一）相关推荐

开大你的音响，感受HTML5 Audio API带来的视听盛宴
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越W ...
html5振动真难受,HTML5振动API支持(HTML5 vibration API support)
HTML5振动API支持(HTML5 vibration API support) 我检查了http://caniuse.com/,但找不到有关振动API兼容性的任何信息. 哪些浏览器支持它? I c ...
HTML5 新增 API
HTML5 新增 API 1. 选择器 API 2. 历史对象 API 3. 新增 Web 存储 API 3.1 Web 存储 API 类型 3.2 本地存储 localStorage 3.2.1 l ...
HTML5 Audio API
话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...
感受HTML5 Audio API带来的视听盛宴
开大你的音响,感受HTML5 Audio API带来的视听盛宴话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候 ...
Html5 FileReader 对文件进行Base64编码
以Base64进行编码的数据Url开始越来越广泛的被应用起来,原来做Base64转换要自己写一个小程序来转,其实Html5的FileReader的readAsDataURL方法读取出的数据就已经是Ba ...
HTML5 Drop API
转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...
html5通过api调数据库,使用HTML5数据库API [关闭](Using HTML5 Database API [closed])
使用HTML5数据库API [关闭](Using HTML5 Database API [closed]) 我正在开发一个使用phonegap/cordova 2.2的web应用程序,并希望将数据存储 ...
HTML5 file api读取文件的MD5码工具
1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...

HTML5 FileReader API 测试（一）

HTML5 FileReader API 测试（一）相关推荐

最新文章

热门文章