javascript 限制上传图片大小

 

很多时候要限制上传图片大小，比如限制在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>