html5中FileReader接口的使用!~(实现图片的显示)

在前面我们学习了,html5中file的multiple属性,使用它的Blob对象,现在我们来试试它的FileReader接口!~

FileReader的主要方法有四个:

readAsBinaryString:将文件读取为二进制码,可以读取在后端进行存储

readAstext:将文件读取为文本,第二个参数是读取的编码

readAsDataURL:将文件读取为DatUrl,可以使用读取的地址进行显示

abort:中断读取

输入代码:

————————————————————————————————–

<!DOCTYPE HTML>
<html>
<head>
<title>使用html5读取文件的内容</title>
<meta charset=”UTF-8″>
<script>
function show(){
var file;
var files=document.getElementById(“file”);
var info=document.getElementById(“info”);
for(var i=0;i<files.files.length;i++){
file=files.files[i];
if(!/image\/\w+/.test(file.type)){//这里是通过正则表达式来匹配文件,images/
info.innerHTML=”<font color=’red’>”+file.name+”不是图像文件<font>”;
break;
}else{
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
var content=document.getElementById(“content”);
content.innerHTML=”<img src=’”+this.result+”‘/>”;
}
info.innerHTML=”<font color=’red’>文件上传成功</font>”;
}
}

}

</script>
</head>

<body>
<center>
<input type=”file” id=”file” multiple size=”80″/>
<input type=”button” onclick=”show();” value=”上传”/><br/>
提示信息:<span id=”info”>无</span><br/>
读取的内容:<span id=”content”></span>
<center>
</body>
</html>

————————————————————————————————–

效果结果:

 

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/files31.htm

 

共有 0 条评论

Top