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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
js函数调用的方式
May 06 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
原生js的数组除重复简单实例
May 24 Javascript
Node.js的特点详解
Feb 03 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
一个简单的js树形菜单
2011/12/09 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
线程同步的方法
2016/11/23 面试题
自荐书模板
2013/12/15 职场文书
单位消防安全制度
2014/01/12 职场文书
大学毕业自我评价
2014/02/02 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
行为规范主题班会
2015/08/13 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers