如何用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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
javascript实现画板功能
Apr 12 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
Python实现新浪博客备份的方法
2016/04/27 Python
Python实现包含min函数的栈
2016/04/29 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Python如何实现定时器功能
2020/05/28 Python
python如何调用java类
2020/07/05 Python
python实现视频压缩功能
2020/12/18 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
小学阳光体育活动总结
2014/07/05 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书