实践html5实例–简单图片浏览器

其实因为html5已经为我们提供了很好的文件的API,所以我们可以通过访问本地文件来实现很多的功能,比如:基于浏览器的音乐播放器,以及现在咱们弄的这个简单的图片浏览器!~

看看其实很简单:

输入代码:

———————————————————————————————-

<!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 style=’widht:200px;height:100px;margin:20px 20px;’ 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/>
读取的内容:<br/><span id=”content”></span>
<center>
</body>
</html>

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

效果截图:

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

共有 0 条评论

Top