如何用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 相关文章推荐
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
关于js datetime的那点事
Nov 15 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
浅谈Vue的响应式原理
May 30 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
浅析JavaScript动画
2015/06/10 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
护理专业优质毕业生自荐书
2014/01/31 职场文书
党员干部公开承诺书
2014/03/26 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书