接口字段html文件,HTML5 FileReader API 测试（一）

参考文章

html5之FileReader接口

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         --------数据读取完成时触发，无论成功失败

HTML5文件

HTML5 Filesystem API Demo

HTML5文件API示例

请选择文件(可多选)：

显示文件信息

测试 readAsText

测试 readAsBinaryString

测试 readAsDataURL

ID文件名文件类型文件大小(KB)最后修改日期

合计：00清除信息

fileReader.js文件如下

//typeof File

if(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 = $("

");

for ( var index = 0; index < fileObjs.length; index++) {

$("

").append($("").append("").val(count).text(count))

.append($("

").text(fileObjs[index].name))

.append($("

").text(fileObjs[index].type))

.append($("

").append($("").val(fileObjs[index].size).text(fileObjs[index].size / 1024)))

.append($("

").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($("").text(txt).after("
"));

};

var handler = {

load : function(event) {

createTag("this is FileReader's onload event.");

$("

").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.οnlοad=createTag("Loading ..." + files[i].name);

reader.loadEnd=createTag("Loading have End!" + files[i].name);

} else {

reader.οnlοad=createTag("Loading ..." + files[i].name);

reader.readAsText(files[i], encoding);

alert(reader.result);

$("#fileContent").append($("" + files[i].name + "
" + reader.result +"
"));

reader.loadEnd=createTag("Loading have End!" + files[i].name);

}

}

return this;

};

jQuery.fn.addText= function(txt) {

var createTag = function(txt) {

$("#console").append($("").text(txt).after("
"));

}

};

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) {

$("").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测试截图