filereader api 类型
2016-01-28 15:19
246 查看
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(fi 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().”);
}
})
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(fi 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().”);
}
})
相关文章推荐
- ASP.net 验证码(C#) MVC
- OC基础--self关键字&super关键字
- 广告点击率 CTR预估中GBDT与LR融合方案
- select转移工具箱
- 并查集
- 创建或删除文件夹
- Android之网络编程(四)解析 JSON 格式数据
- 用DrawText实现高效的Android倒计时功能。
- 数据结构基础(8) --单链表的设计与实现(1)之基本操作
- SQL字符串函数
- Lua 在C程序中进行Lua表操作
- 说说分布式事务
- SVG
- 静态化 - 伪静态技术(PHP正则表达式实现)
- UVA 12333
- Black Hat python-1.x
- 解决ANT无法捕获异常的问题
- fiddler+jmeter联合使用
- Android 仿美女撕衣服效果
- 简单的动态广播收发