JavaScript检测上传文件大小的方法


Posted in Javascript onJuly 22, 2015

本文实例讲述了JavaScript检测上传文件大小的方法。分享给大家供大家参考。具体如下:

通过JS客户端代码限制用户上传文件的大小,但是客户端的验证只是辅助的,服务器端一定还要再做验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta name="DEscription" contect="my code demo" />
 <meta name="Author" contect="Michael@3water.com" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>js check file size @ 3water.com</title>
 </head>
 <body>
  <img id="tempimg" dynsrc="" src="" style="display:none" />
  <input type="file" name="file" id="fileuploade" size="40" />
  <input type="button" name ="check" value="checkfilesize" onclick="checkfile()"/>
 </body>
 <script type="text/javascript">
  var maxsize = 2*1024*1024;//2M
  var errMsg = "上传的附件文件不能超过2M!!!";
  var tipMsg = "您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过2M,建议使用IE、FireFox、Chrome浏览器。";
  var browserCfg = {};
  var ua = window.navigator.userAgent;
  if (ua.indexOf("MSIE")>=1){
   browserCfg.ie = true;
  }else if(ua.indexOf("Firefox")>=1){
   browserCfg.firefox = true;
  }else if(ua.indexOf("Chrome")>=1){
   browserCfg.chrome = true;
  }
  function checkfile(){
   try{
     var obj_file = document.getElementById("fileuploade");
     if(obj_file.value==""){
      alert("请先选择上传文件");
      return;
     }
     var filesize = 0;
     if(browserCfg.firefox || browserCfg.chrome ){
      filesize = obj_file.files[0].size;
     }else if(browserCfg.ie){
      var obj_img = document.getElementById('tempimg');
      obj_img.dynsrc=obj_file.value;
      filesize = obj_img.fileSize;
     }else{
      alert(tipMsg);
     return;
     }
     if(filesize==-1){
      alert(tipMsg);
      return;
     }else if(filesize>maxsize){
      alert(errMsg);
      return;
    }else{
     alert("文件大小符合要求");
      return;
    }
   }catch(e){
    alert(e);
   }
  }
 </script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
jquery 图片轮换效果
Jul 29 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 #Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 #Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 #Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 #Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 #Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 #Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 #Javascript
You might like
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php header函数的常用http头设置
2015/06/25 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python实现购物车购物小程序
2018/04/18 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python实现电子书翻页小程序
2019/07/23 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
eBay奥地利站:eBay.at
2019/07/24 全球购物
推荐信怎么写
2014/05/09 职场文书
党员剖析材料范文
2014/09/30 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
圣诞晚会主持词
2015/07/01 职场文书
老人节主持词
2015/07/04 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL