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实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
JavaScript实现刮刮乐效果
Nov 01 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
js打开新窗口方法整理
2014/02/17 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python numpy 点数组去重的实例
2018/04/18 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
基于python调用psutil模块过程解析
2019/12/20 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
致跳高运动员广播稿
2014/01/13 职场文书
创先争优活动方案
2014/02/12 职场文书
校庆筹备方案
2014/03/30 职场文书
国际贸易求职信
2014/07/05 职场文书
团队会宣传标语
2014/10/09 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
python文件名批量重命名脚本实例代码
2021/04/22 Python
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL