javascript 限制上传图片大小 - [WEB]

很多时候要限制上传图片大小，比如限制在100KB以下，用javascript可以实现。但是在使用img.filesize时，图片尺寸一大了就会返回-1，解决办法是在浏览选择好图片路径以后，加入一个默认的预览功能，即图片上传路径input框属性中加入一个changesrc函数（定义见下面），代码<input type="file" name="file" size="10"

id="pic" onchange="changesrc()"/>。经过预览功能就可以将图片对象初始化，这时点上传触发checkpic函数时，用filesize就可以获得图片真实大小了。

代码如下：

<script language="JavaScript" type="text/JavaScript">

var img=null;

function checkPic(picForm){

var location=picForm.pic.value;

if(location==""){

alert("请先选择图片文件");

return false;

}

var point = location.lastIndexOf(".");

var type = location.substr(point);

if(type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"){

img=document.createElement("img");

img.src=location;

if(img.fileSize>102400){

alert("图片尺寸请不要大于100KB");

return false;

}else

return true;

}

else{

alert("只能输入jpg或者gif格式的图片");

return false;

}

return true;

}

function changesrc(){

yourpic.src=picForm.pic.value;

}

</script>

<table width="100%" border="0">

<tr>

<td>

<div align="center"><img border="1" id="yourpic"

onload="javascript:if(this.width>175)this.width=175;if(this.height>150)this.height=150;">

</div>

</td>

</tr>

<form name="picForm" action="#" method="post"

enctype="multipart/form-data" onsubmit="return checkPic(picForm);">

<tr>

<td>

<div align="center"><input type="file" name="file" size="10"

id="pic" onchange="changesrc()"/></div>

</td>

</tr>

<tr>

<td>

<div align="center"><input type="submit" value="上传照片" /></div>

</td>

</tr>

</table>