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 相关文章推荐
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
Webpack之tree-starking 解析
Sep 11 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
JS继承最简单的理解方式
Mar 31 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
php7下的filesize函数
2019/09/30 PHP
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python中的元组介绍
2019/01/28 Python
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
大学生物业管理求职信
2013/10/24 职场文书
大四自我鉴定
2014/02/08 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
建设工地安全标语
2014/06/07 职场文书
好听的队名和口号
2014/06/09 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
安全生产工作汇报
2014/10/28 职场文书
责任书格式
2015/01/29 职场文书
情况说明书怎么写
2015/10/08 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL