javascript检测图片大小、类型、长宽
来源：互联网 发布：站外优化 编辑：程序博客网 时间：2024/05/01 03:00
<!--
版本:20070421
功能:实现IE客户端检测图片大小,格式,文件名
参数:必填
作者:beimuaihui
代码格式化工具:SourceFormatX
调试工具:vs 2005
参考:通用表单检测代码(http://www.i170.com/Article/6845)
百度知道:http://zhidao.baidu.com
javascript参考手册:http://doc.51windows.net/jscript5/?url=/jscript5/dir.htm
谷歌:http://www.google.cn
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">...
function checkForm()
...{
var centerlogo=document.getElementById("centerlogo");
var centerlogo2=document.getElementById("centerlogo2");
return checkphoto(centerlogo) && checkphoto(centerlogo2);
}
</script>
</head>
<body>
<form action="1.asp" onsubmit="return checkForm()">
<input name="centerlogo" id="centerlogo" type="file" require="false" accept=",jpg,jpeg,gif,png," picwidth="100"
picheight="115" picsize="30" onChange="checkphoto(this)">
<input name="centerlogo2" id="centerlogo2" type="file" require="false" accept=",jpg,jpeg,gif,png," picwidth="100"
picheight="115" picsize="30" onChange="checkphoto(this)">
<input type="submit" value="submit" />
</form>
<script language="javascript" type="text/javascript">...
// JavaScript Document
oFileChecker = new Image(); //定义一个图片,否则oFileChecker.onreadystatechange会报错
//图片装载时
oFileChecker.onreadystatechange = function ()
...{
//装载完成时
if (this.readyState == "complete")
...{
checkLength(this); //检测图片长宽
checkSize(this); //检测图片大小
if(errMsg!="")...{
alert(errMsg);
this.rule=false;
}
else
...{
this.rule=true;
}
}
}
//检测图片函数,并且返回是否正确
function checkphoto(photosrc)
...{
//初使化变量
oFileChecker.src="";
errMsg="";
oFileChecker.rule=false; //图片是否完成检测
//获取图片设置
w=parseInt(photosrc["picwidth"]); //图片的宽度
h=parseInt(photosrc["picheight"]); //图片的高度
limit=parseInt(photosrc["picsize"]); //图片的大小(KB)
allImgExt=photosrc["accept"]; //文件类型
required=photosrc["require"];//图片是否必填
filename=photosrc.value;//图片文件名
//如果图片不是必填项且为图片名为空
if(required=="false" && filename=="")
...{
return true;
}
checkType(); //检测扩展名
if(errMsg!="")
...{
alert(errMsg);
return false;
}
oFileChecker.src = photosrc.value;
window.setTimeout(function()...{},500);//延时一下,使大图片能完全载入(?)
return oFileChecker.rule;
}
//检测图片类型
function checkType()
...{
var fileExt=filename.substr(filename.lastIndexOf(".")+1).toLowerCase();
if(allImgExt.indexOf(","+fileExt+",")==-1)
...{
errMsg="图片类型应为"+allImgExt+"格式!";
}
}
//检测图片长宽
function checkLength(photo)
...{
//如果图片长宽没有设置或设置错误,还回true
if(isNaN(w) || isNaN(h))
return true;
if(photo.width!=w || photo.height!=h)
...{
errMsg="图片格式为"+w+"px*"+h+"px";
}
}
//检测图片文件大小
function checkSize(photo)
...{
//如果图片文件大小没有设置或设置错误,还回true
if(isNaN(limit))
return true;
if(photo.fileSize > limit*1024)
...{
errMsg="文件不能超过"+limit +"K";
}
}
</script>
</body>
</html>
