通过html5实现图片上传客户端验证

我们知道,通过html里面的multiple属性,可以实现文件的多个上传,通过文件的Blob对象可以得到文件的相关的信息,所以我们就可以实现一个小功能来完成图片上传的验证,之前我们做验证在客户端只能是通过正则表达式来匹配文件的后缀名,现在我们通过文件的type属性来完成验证!~

输入代码:

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

<!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{
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/>
<center>
</body>
</html>

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

效果截图:

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

共有 0 条评论

Top