上傳圖片預覽、大小、格式控制

很多時候要限制上傳圖片大小,比如限制在100KB以下,用javascript可以實現。但是在使用img.filesize時,圖片尺寸一大了就會返回-1,解決辦法是在瀏覽選擇好圖片路徑以後,加入一個默認的預覽功能,即圖片上傳路徑input框屬性中加入一個changesrc函數(定義見下面),代碼<input type="file" name="file" size="10"  id="pic" οnchange="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"||type==".bmp"||type==".BMP"){
  img=document.createElement("img");  
  img.src=location;
  if(img.fileSize>1024000){
   alert("圖片尺寸請不要大於1000KB");
   return false;
  }else
     return true;
}
else{
  alert("只能上傳jpg、gif、bmp格式的圖片");
  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"
       οnlοad="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" οnsubmit="return checkPic(picForm);">
     <tr>
      <td>
      <div align="center"><input type="file" name="file" size="10"
       id="pic" οnchange="changesrc()"/></div>
      </td>
     </tr>
     <tr>
      <td>
      <div align="center"><input type="submit" value="上傳照片" /></div>
      </td>
     </tr>
</table>

==============================================================================================

發佈了65 篇原創文章 · 獲贊 0 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章