<!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>
</head>
<body style="font-family:Arial, sans-serif; ">
<h3 align=center>图片类型：gif、jpg、jpeg、png、bmp</h3>
<hr color=red>
<form >
<table align=center>
<tr>
<td>
图片大小限制（单位：Kb）：
</td>
<td>
<input type="text" size="4" value="100" name="fileSizeLimit" id="fileSizeLimit" />K
</td>
</tr>
<tr>
<td>
图片高度限制（单位：像素）：
</td>
<td>
<input type="text" size="4" value="100" name="heightLimit" id="heightLimit" />
</td>
</tr>
<tr>
<td>
图片宽度限制（单位：像素）：
</td>
<td>
<input type="text" size="4" value="100" name="widthLimit" id="widthLimit" />
</td>
</tr>
<tr>
<td>
选择上传文件
</td>
<td>
<input type="file" name="photo" onchange="changeSrc(this)" />
</td>
</tr>
<tr>
<td>
图片预览：
</td>
<td>
<img id="fileChecker" name="fileChecker" alt="test" />
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="检 查">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//符合条件的图片格式的数组
var right_type=new Array(".gif",".jpg",".jpeg",".png",".bmp");
//图片预览组件
var oFileChecker = document.getElementById("fileChecker");
//检查图片大小
function CheckFileSize()
{
var limit = document.getElementById("fileSizeLimit").value * 1024;
var width = document.getElementById("widthLimit").value ;
var height = document.getElementById("heightLimit").value;
if (oFileChecker.fileSize > limit)
{
alert("图片大小："+oFileChecker.fileSize+"byte--太大！");
}
else
{
alert("图片大小："+oFileChecker.fileSize+"byte--ok！");
}
if( oFileChecker.height> height)
{
alert("图片高度："+oFileChecker.height+"--太高！");
}
else
{
alert("图片高度："+oFileChecker.height+"--ok！");
}
if(oFileChecker.width> width)
{
alert("图片宽度："+oFileChecker.width+"--太宽！");
}
else
{
alert("图片宽度："+oFileChecker.width+"--ok！");
}
return false;
}
//file组件onchange事件处理器
function changeSrc(filePicker)
{
if(!checkImgType(filePicker.value))
{
alert("图片格式不正确！");
return;
}
oFileChecker.src = filePicker.value;
}
oFileChecker.onreadystatechange = function ()
{
if (oFileChecker.readyState == "complete")
{
CheckFileSize();
}
}
//图片类型检查函数
function checkImgType(fileURL)
{
var right_typeright_typeLen=right_type.length;
var imgUrl=fileURL.toLowerCase();
var postfixLen=imgUrl.length;
var len4=imgUrl.substring(postfixLen-4,postfixLen);
var len5=imgUrl.substring(postfixLen-5,postfixLen);
for (i=0;i<right_typeLen;i++)
{
if((len4==right_type[i])||(len5==right_type[i]))
{
return true;
}
}
}
</script>
</body>
</html>
由于各种原因,我们无法获知[图片上传时，图片类型、尺寸及大小的校验]原创作者,如侵犯了您的版权,请您及时联系我们!