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蒙版控件实现代码
Dec 08 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
Node.js插件安装图文教程
May 06 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
angular select 默认值设置方法
Jun 23 Javascript
layui实现动态和静态分页
Apr 28 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
优雅地使用loading(推荐)
Apr 20 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下escape解码函数的实现方法
2010/08/08 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php之curl设置超时实例
2014/11/03 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
教你用Python创建微信聊天机器人
2020/03/31 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
xxx同志考察材料
2014/02/07 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
工作犯错保证书
2015/05/11 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书