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 相关文章推荐
Js sort排序使用方法
Oct 17 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
vue.js实例todoList项目
Jul 07 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 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
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
vuex存储token示例
2019/11/11 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python如何实现反向迭代
2018/03/20 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
护士辞职信模板
2014/01/20 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
小学生安全责任书
2014/07/25 职场文书
银行授权委托书样本
2014/10/13 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
MySQL插入数据与查询数据
2022/03/25 MySQL
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript