网站建设网站首页 网站建设

html5文件api（1）

发布时间：2017-04-15 19:14:39编辑：雪饮阅读（）

blob对象是一个二进制对象

file继承自blob对象

blob对象有一个属性type,其值如image等

FileReader包含:

5个对象:

readAsBinaryString:读取文件为二进制格式字符串

readAsText:读取文件为文本格式（就相当于你将一个文件以记事本的形式打开所见内容一样）

readAsDataURL:读取文件为web端url可解析的数据

readArrayBuffer:一个数组相关的对象

abort:出了问题就中断读取操作

6个事件:

onabort:中断时执行

onerror:出现错误时执行

onloadstart:刚刚读取的时候触发

onprogress:读取过程中触发

onload:成功读取之后触发（仅成功后）

onloadend:读取结束后触发（无论成功还是失败）

案例demo：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

function showimg(){

var file=document.getElementById("file").files[0];

var reader=new FileReader();

reader.readAsDataURL(file);

reader.onload=function(e){

var resultimg=document.getElementById("img");

resultimg.innerHTML="<img src='"+this.result+"'/>";

}

</script>

</head>

<body>

<br/>

<br/>

<p>先选择图片，然后点击显示图片</p>

</div>

</body>

</html>

关键字词：html5,文件,api