filereader类似XMLHttpRequest,只是它用来从文件系统读取文件,提供了不同的方法去读取文件数据:
1、readAsText
2、readAsDataURL
3、readAsBinaryString
4、readAsArrayBuffer
读取的过程是异步的,有一些事件可以监听,progress,error,load等
progress事件没50毫秒触发一次,也有lengthComputable,loaded,total属性,可以在result里查看到目前读取了多少数据。
举例:
var filesList = document.getElementById(“files-list”);
EventUtil.addHandler(filesList, “change”, function(event){
var info = “”,
output = document.getElementById(“output”),
progress = document.getElementById(“progress”),
files = EventUtil.getTarget(event).files,
type = “default”,
reader = new FileReader();
if (/image/.test(files[0].type)){
reader.readAsDataURL(files[0]);
type = “image”;
} else {
reader.readAsText(files[0]);
type = “text”;
}
reader.onerror = function(){
output.innerHTML = “Could not read file, error code is “ +
reader.error.code;
};
reader.onprogress = function(event){
if (event.lengthComputable){
progress.innerHTML = event.loaded + “/” + event.total;
}
};
reader.onload = function(){
var html = “”;
switch(type){
case “image”:
html = “<img src=\”” + reader.result + “\”>”;
break;
case “text”:
html = reader.result;
break;
}
output.innerHTML = html;
};
});
读取过程中也是可以用abort来中断。最后不管是load,error,abort,都会触发loadend事件,意味着操作结束
如果需要读取部分内容的话,可以使用Blob上的slice方法。slice方法返回一个 Blob的实例。Blob类型实际上是file类型的super type。
function blobSlice(blob, startByte, length){
if (blob.slice){
return blob.slice(startByte, length);
} else if (blob.webkitSlice){
return blob.webkitSlice(startByte, length);
} else if (blob.mozSlice){
return blob.mozSlice(startByte, length);
} else {
return null;
}
}
读取文件前32位数据:
var filesList = document.getElementById(“files-list”);
EventUtil.addHandler(filesList, “change”, function(event){
var info = “”,
output = document.getElementById(“output”),
progress = document.getElementById(“progress”),
files = EventUtil.getTarget(event).files,
reader = new FileReader(),
blob = blobSlice(? les[0], 0, 32);
if (blob){
reader.readAsText(blob);
reader.onerror = function(){
output.innerHTML = “Could not read file, error code is “ +
reader.error.code;
};
reader.onload = function(){
output.innerHTML = reader.result;
};
} else {
alert(“Your browser doesn’t support slice().”);
}
})