如何用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+css在交互上的应用
Jul 18 Javascript
jQuery find和children方法使用
Jan 31 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
python支持多线程的爬虫实例
2019/12/21 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
黄继光的英雄事迹材料
2014/02/13 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
保证书格式
2015/01/16 职场文书
家长会欢迎词
2015/01/23 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
HTTP中的Content-type详解
2022/01/18 HTML / CSS