如何用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 相关文章推荐
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
详解微信UnionID作用
May 15 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 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
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
php实现的http请求封装示例
2016/11/08 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
Python标准库与第三方库详解
2014/07/22 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
什么是Smart Navigation?
2016/07/03 面试题
领导失职检讨书
2014/02/24 职场文书
入党推优材料
2014/06/02 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
应聘教师自荐信
2015/03/26 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
Python制作春联的示例代码
2022/01/22 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
Go语言编译原理之源码调试
2022/08/05 Golang