快捷導(dǎo)航

如何用javascript控制上傳文件的大小

更新時間：2006年10月26日 00:00:00 作者：

<form   name=Myform  onsubmit="return   CheckFileSize()">     
  <input   type=file   name=photo><br/>     
  <input   type=submit   value=submit></form>     

  <SCRIPT   LANGUAGE="JavaScript"><!--     
  function   CheckFileSize()     
  {     
      var   s   =   document.Myform.photo.value;     
      if(s==" ")return   false;     
      var   img   =   new   Image();     
      img.src   =   s;     
      alert("高   =   "+   img.height   +   "\n寬   =   "+   img.width);     
      alert("fileSize   =   "+   img.fileSize   +"   字節(jié)");     
      return   false;     
  }     
  //--></SCRIPT>   

應(yīng)用了javascript和在IE下img本身的fileSize屬性。另外img還有其他的幾個屬性，如fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters，我們可以通過這些屬性來獲取圖片文件的部分信息，如文件大小，我們用file表單同img標(biāo)簽結(jié)合，就能夠在上傳之前判斷圖片文件的大小是否合法了。

復(fù)制代碼代碼如下:

<input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> K  
<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>  
<img src="about:blank" id="fileChecker" alt="test" height="18"/>  

<script type="text/javascript">  
var oFileChecker = document.getElementById("fileChecker");  

function changeSrc(filePicker)  
{  
oFileChecker.src = filePicker.value;  
}  

oFileChecker.onreadystatechange = function ()  
{  
if (oFileChecker.readyState == "complete")  
{  
checkSize();  
}  
}  

function checkSize()  
{  
var limit = document.getElementById("fileSizeLimit").value * 1024;  

if (oFileChecker.fileSize > limit)  
{  
alert("too large");  
}  
else  
{  
alert("ok");  
}  
}  
</script> 

復(fù)制代碼代碼如下:

function   CheckFileSize()     
  {     
     var FileMaxSize = 100;//限制上傳的文件大小，單位(k)  
      var   s   =   document.RegForm.Img_1.value;    
      //if(s==""){alert("No image,please select again!");document.RegForm.Img_1.focus(); return   false;}     
      var   img   =   new   Image();     

      img.src   =   s;   

     if(img.fileSize>FileMaxSize*1024){alert("The file size exceeds "+FileMaxSize+"K，please choose a smaller one!");document.RegForm.Img_1.focus();return false;}  

  //--></SCRIPT>     
<FORM action="**.asp" method="post" onSubmit="return CheckFileSize()" enctype="multipart/form-data" name="RegForm">  
<input name="Next" type="submit" class="pBttn" id="Next" value="Save">

您可能感興趣的文章: