如何用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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
JavaScript面向对象编程
Mar 02 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
微信小程序实现日历效果
Dec 28 Javascript
VsCode与Node.js知识点详解
Sep 05 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 addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
Python编程实现的图片识别功能示例
2017/08/03 Python
使用Python来开发微信功能
2018/06/13 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
python super函数使用方法详解
2020/02/14 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
python 5个顶级异步框架推荐
2020/09/09 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
学习十八大宣传标语
2014/10/09 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
详解redis在微服务领域的贡献
2021/10/16 Redis
python3 字符串str和bytes相互转换
2022/03/23 Python
Python读取和写入Excel数据
2022/04/20 Python