目录

  1. 基本思路
  2. 示例

[一]、基本思路

在FireFox、Chrome浏览器中可以根据document.getElementById(“id_file”).files[0].size 获取上传文件的大小（字节数），而IE浏览器中不支持该属性，只能借助<img>标签的dynsrc属性，来间接实现获取文件的大小（但需要同意ActiveX控件的运行）。

[二]、示例

测试代码：filesize-check.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3     <head>
4     <meta name="DEscription" contect="my code demo" />
5     <meta name="Author" contect="Michael@www.micmiu.com" />
6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7     <title>js check file size @ www.micmiu.com</title>
8     </head>
9     <body>
10         <img id="tempimg" dynsrc="" src="" style="display:none" />
11         <input type="file" name="file" id="fileuploade" size="40" />
12         <input type="button" name ="check" value="checkfilesize"onclick="checkfile()"/>
13  
14     </body>
15     <script type="text/javascript">
16         var maxsize = 2*1024*1024;//2M
17         var errMsg = "上传的附件文件不能超过2M！！！";
18         var tipMsg = "您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过2M，建议使用IE、FireFox、Chrome浏览器。";
19         var  browserCfg = {};
20         var ua = window.navigator.userAgent;
21         if (ua.indexOf("MSIE")>=1){
22             browserCfg.ie = true;
23         }else if(ua.indexOf("Firefox")>=1){
24             browserCfg.firefox = true;
25         }else if(ua.indexOf("Chrome")>=1){
26             browserCfg.chrome = true;
27         }
28         function checkfile(){
29             try{
30                 var obj_file = document.getElementById("fileuploade");
31                 if(obj_file.value==""){
32                     alert("请先选择上传文件");
33                     return;
34                 }
35                 var filesize = 0;
36                 if(browserCfg.firefox || browserCfg.chrome ){
37                     filesize = obj_file.files[0].size;
38                 }else if(browserCfg.ie){
39                     var obj_img = document.getElementById('tempimg');
40                     obj_img.dynsrc=obj_file.value;
41                     filesize = obj_img.fileSize;
42                 }else{
43                     alert(tipMsg);
44                 return;
45                 }
46                 if(filesize==-1){
47                     alert(tipMsg);
48                     return;
49                 }else if(filesize>maxsize){
50                     alert(errMsg);
51                     return;
52                 }else{
53                     alert("文件大小符合要求");
54                     return;
55                 }
56             }catch(e){
57                 alert(e);
58             }
59         }
60     </script>
61 </html>

测试上传的文件大小：

各浏览器中的效果如下：

IE8：

FF(11.0)：

Chrome(19.0.1084.56 m)：

—————–

javascript实现限制上传文件的大小的更多相关文章

  1. jQuery统计上传文件的大小

    对于现代浏览器(支持html5)来说,在客户端统计上传文件的大小,可以通过$(selector)[0].files[0].size来实现.但在老版本的IE浏览器中,比如IE7,IE8或IE9,却不支持 ...

  2. ASP.Net在web.config中设置上传文件的大小方法

    修改Webcong文件:<system.web><httpRuntime maxRequestLength="40960"   //即40MB,1KB=1024u ...

  3. [转]javascript实现限制上传文件的大​​小

    本文转自:http://www.micmiu.com/lang/javascript/js-check-filesize/ 目录 基本思路 示例 [一].基本思路 在FireFox.Chrome浏览器 ...

  4. Windows服务器修改网站上传文件的大小限制

    ASP程序 方法一: 修改该网站的的最大上传文件的大小限制 在Windows server上会出现上传大小受限制的问题,这是由于windows server的IIS管理器做了限制所致,IIS默认设置是 ...

  5. html5 如何实现客户端验证上传文件的大小

    在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...

  6. struts2文件上传时获取上传文件的大小

    利用struts2框架上传文件时,如果想要获取上传文件的大小可以利用下面的方式进行: FileInputStream ins = new FileInputStream(file); if (ins. ...

  7. flask控制上传文件的大小

    1.flask控制上传文件的大小的方案是全局控制:http://docs.jinkan.org/docs/flask/patterns/fileuploads.html from flask impo ...

  8. ASP.Net调整允许上传文件的大小

    1.用户上传视频文件注意:调整允许上传文件的大小:ASP.Net为了防止过大的http恶意请求阻塞网站,所以限定了每次上传文件最大4M,asp.net1.1中把用户上传的文件先放到内存中,2.0后如果 ...

  9. iis7/7.5设置上传文件最大大小

    本编今天接到一个客户的修改,说一个68M的pdf文件上传不上去,但是我本地开启断点调试了好几遍,都没有问题,能正常上传文件,由此确定不是代码问题.然后我试着上传5M左右的pdf却能正常的上传,然后上传 ...

随机推荐

  1. 用timer控件实现sleep效果

    有时候我们需要代码延迟执行,这就需要用到Thread.Sleep()这个方法,但这个方法在主线程使用时会造成界面假死.使用timer控件既能达到代码延迟执行的效果,又不会有假死的困扰. 假设我们需要在 ...

  2. mysql explain 命令解释

    转载http://bzyyc.happy.blog.163.com/blog/static/6143064720115102551554/ key实 际使用的索引.如果为NULL,则没有使用索引.很少 ...

  3. HDU_2068_RPG错排

    Problem Description 今年暑假杭电ACM集训队第一次组成女生队,其中有一队叫RPG,但做为集训队成员之一的野骆驼竟然不知道RPG三个人具体是谁谁.RPG给他机会让他猜猜,第一次猜:R ...

  4. c#geckofx文件流下载

    备注:内容仅提供参考. ⒈添加引用:using Gecko; ⒉然后根据自己的情况在某个方法内添加事件: LauncherDialog.Download += new EventHandler< ...

  5. sql server使用说明

    什么是sql server? SqlServer是微软的一款数据库系统产品. 是DBMS中的一种. 当每一个数据库安装到每一台电脑后,都会与计算机名称(有的是IP地址)关联.因为服务器用途的电脑不能经 ...

  6. Struts2 框架验证

    struts2框架验证(xml方式):    * 首先要从页面中获取对应的标签name属性的值,在动作类action中声明同名的属性,提供get和set方法        * 创建一个xml格式验证文 ...

  7. QT参考录

    源码参考: #include "CServerManager.h" CServerManager* CServerManager::m_pInstance = NULL; CSer ...

  8. 如何修改WAMP中mysql默认空密码&重新登录phpmyadmin

    WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车 ...

  9. SAX解析

    SAX解析工具- Sun公司提供的.内置在jdk中.org.xml.sax. 核心的API: SAXParser类: 用于读取和解析xml文件对象 parse(File f, DefaultHandl ...

  10. 转：单片机C语言中的data,idata,xdata,pdata,code

    从数据存储类型来说,8051系列有片内.片外程序存储器,片内.片外数据存储器,片内程序存储器还分直接寻址区和间接寻址类型,分别对应code.data.xdata.idata以及根据51系列特点而设定的 ...