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实现下载远程文件并保存在本地的脚本
May 06 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
react基本安装与测试示例
Apr 27 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面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python实现划词翻译
2020/04/23 Python
python实现代码行数统计示例分享
2014/02/10 Python
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
django2 快速安装指南分享
2018/01/05 Python
python 对key为时间的dict排序方法
2018/10/17 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python-for循环的内部机制
2020/06/12 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
关于Java String的一道面试题
2013/09/29 面试题
公司联欢晚会主持词
2014/03/22 职场文书
《雪儿》教学反思
2014/04/17 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
三八妇女节标语
2014/10/09 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书