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中的对象化编程
Jan 16 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
基于Vue的侧边目录组件的实现
Feb 05 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 中 config.m4 的探索
2020/08/26 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
详解python中executemany和序列的使用方法
2017/08/12 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
python是怎么被发明的
2020/06/15 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Python实现画图软件功能方法详解
2020/07/28 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
linux面试题参考答案(11)
2012/05/01 面试题
经典优秀个人求职自荐信格式
2013/09/25 职场文书
服装促销活动方案
2014/02/23 职场文书
教师专业自荐信
2014/05/31 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
大学班干部竞选稿
2015/11/20 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python