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


Posted in Javascript onOctober 26, 2006
<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 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
动态改变textbox的宽高的js
Oct 26 #Javascript
js传值 判断
Oct 26 #Javascript
点击广告后才能获得下载地址
Oct 26 #Javascript
PJBlog插件 防刷新的在线播放器
Oct 25 #Javascript
PJ Blog修改-禁止复制的代码和方法
Oct 25 #Javascript
Hutia 的 JS 代码集
Oct 24 #Javascript
xmlHTTP实例
Oct 24 #Javascript
You might like
调频问题解答
2021/03/01 无线电
漂亮但不安全的CTB
2006/10/09 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
python实现人机五子棋
2020/03/25 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
环境工程求职简历的自我评价范文
2013/10/24 职场文书
后勤工作职责
2013/12/22 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
培训主管岗位职责
2014/02/01 职场文书
外国人聘用意向书
2014/04/01 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
小学语文教学随笔
2015/08/14 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android