脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 →

如何用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   +"   字节");    
      return   false;    
  }    
  //--></SCRIPT>   

应用了javascript和在IE下img本身的fileSize属性。另外img还有其他的几个属性，如fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters，我们可以通过这些属性来获取图片文件的部分信息，如文件大小，我们用file表单同img标签结合，就能够在上传之前判断图片文件的大小是否合法了。
复制代码 代码如下:

<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> 

复制代码 代码如下:

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">

您可能感兴趣的文章:

相关文章

  • Javascript获取CSS伪元素属性的实现代码

    Javascript获取CSS伪元素属性的实现代码

    这篇文章主要介绍了Javascript获取CSS伪元素属性的实现代码,需要的朋友可以参考下
    2014-09-09
  • js获取异步函数数据的实现

    js获取异步函数数据的实现

    本文主要介绍了js获取异步函数数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • JavaScript实现表格表单的随机选择和简单的随机点名

    JavaScript实现表格表单的随机选择和简单的随机点名

    本文主要介绍了JavaScript实现表格表单的随机选择和简单的随机点名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • javascript获取隐藏元素(display:none)的高度和宽度的方法

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
    2014-06-06
  • JavaScript实现获取select下拉框中第一个值的方法

    JavaScript实现获取select下拉框中第一个值的方法

    这篇文章主要介绍了JavaScript实现获取select下拉框中第一个值的方法,涉及javascript针对页面元素属性的相关获取操作技巧,需要的朋友可以参考下
    2018-02-02
  • 输入框点击时边框变色效果的实现方法

    输入框点击时边框变色效果的实现方法

    下面小编就为大家带来一篇输入框点击时边框变色效果的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-12-12
  • 原生JS实现无缝轮播图片

    原生JS实现无缝轮播图片

    这篇文章主要为大家详细介绍了原生JS实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 详解关于html，css，js三者的加载顺序问题

    详解关于html，css，js三者的加载顺序问题

    这篇文章主要介绍了关于html，css，js三者的加载顺序问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-08-08
  • 如何自定义微信小程序tabbar上边框的颜色

    如何自定义微信小程序tabbar上边框的颜色

    这篇文章主要介绍了如何自定义微信小程序tabbar上边框的颜色,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论