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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
vue实现路由切换改变title功能
May 28 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
微信小程序实现简单购物车功能
Dec 30 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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
python自动化报告的输出用例详解
2018/05/30 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
全球性的女装店:storets
2019/06/12 全球购物
最新党员思想汇报
2014/01/01 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python