本文转自:http://www.micmiu.com/lang/javascript/js-check-filesize/

目录

  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. 关于php上传文件过大的表单回填

    也许标题有点绕口,有点无法让人理解.请原谅博主,语文学的不好,都赖体育老师. 问题场景重现:在某次迭代中,接到这样一个需求:当新建或编辑一个Bug(包含附件以及其他字段)上传附件过大时,退回到编辑页面 ...

  2. javascript实现限制上传文件的大小

    目录 基本思路 示例 [一].基本思路 在FireFox.Chrome浏览器中可以根据document.getElementById(“id_file”).files[0].size 获取上传文件的大 ...

  3. 关于form 上传文件时的小问题

    平时的form一般写成这样: <form action=" " method="" id="" name=""&g ...

  4. c# 模拟表单提交，post form 上传文件、大数据内容

    表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...

  5. HTML上传文件支持大文件上传,下载

    上传 1.修改配置文件web.config,在<system.webServer>下面加入 <security> <requestFiltering > <r ...

  6. xutils3 上传文件操作——个人小计

    上传文件注意: 使用KeyValue对象进行添加文件操作 int uid = 2; //普通字段的存储 requestParams.addBodyParameter("uid", ...

  7. .net上传文件，大文件及下载方式汇总(转)

    原文地址:http://www.360doc.com/content/19/1219/10/67993814_880731215.shtml Brettle.Web.NeatUpload.dll 文件 ...

  8. Form key length limit 2048 exceeded ，提交数据时，数据的键过长 或者是上传文件过大

    在ASP.NET Core MVC中,文件的key 默认最大为2048,文件上传的最大上传文件默认为20MB,如果我们想上传一些比较大的文件,就不知道怎么去设置了,没有了Web.Config我们应该如 ...

  9. springboot上传文件过大，全局异常捕获，客户端没有返回值

    最近在项目里进行全局异常处理时,上传文件超过配置大小,异常被捕获,但是接口直接报500错误,且没有任何返回值. 从后台报错日志来看,异常已经被全局异常处理捕获到了,并且也已经完成响应,为什么前端看不到 ...

随机推荐

  1. C# Winform欢迎窗体实现(）

    方法一.program.cs 中先启动欢迎窗体,然后注册程序运行空闲去执行主程序窗体相应初始化代码 static void Main(string[] args) { Application.Enab ...

  2. Python3中简单的迭代器程序

    1.迭代器程序(实现菲比那次数列并且可以抛出与接收异常) def fib(max): n,a,b = 0,0,1 while n < max: #print(b) yield b a,b = b ...

  3. ubuntu - 安装软件问题

    problem & solution 问题1 - E: 无法定位软件包 @原因(1) - 没有添加相应软件的镜像源(软件源)    解决方案 用 gedit/vi/vim - 在 /etc/a ...

  4. Mybatis基于代理Dao实现CRUD操作 及 Mybatis的参数深入

    Mybatis基于代理Dao实现CRUD操作 使用要求: 1.持久层接口和持久层接口的映射配置必须在相同的包下 2.持久层映射配置中mapper标签的namespace属性取值必须是持久层接口的全限定 ...

  5. [A/C 2007] 数据备份（网络流，堆）

    [A/C 2007] 数据备份(网络流,堆) 给你N各点的位置和K条链,需要用这些链把2K个点连起来,使得链的总长最短.可以随意选择要链的点.n=100000. 这道题居然可以用堆-- 首先,不能把区 ...

  6. 【51nod1847】奇怪的数学题（Min_25筛+杜教筛）

    题面 传送门 题解 这题有毒--不知为啥的错误调了半天-- 令\(f(i)={sgcd(i)}\),那么容易看出\(f(i)\)就是\(i\)的次大质因子,用\(i\)除以它的最小质因子即可计算 于是 ...

  7. 【微框架】之一：从零开始，轻松搞定SpringCloud微服务系列--开山篇（spring boot 小demo）

    Spring顶级框架有众多,那么接下的篇幅,我将重点讲解SpringCloud微框架的实现 Spring 顶级项目,包含众多,我们重点学习一下,SpringCloud项目以及SpringBoot项目 ...

  8. 出现epoll failed: Bad file descriptor的原因

    今天遇到了这个问题,之前找了半天原来是IO事件的socket描述符在epoll_ctl()处理之前关闭了. if(epoll_ctl(epollFd, EPOLL_CTL_DEL, ev->fd ...

  9. 快速找出故障机器（single number）

    简单起见,假设每个机器存储一个标号为ID的记录(ID是小于十亿的整数),假设每份数据都保存两个备份,这样就有两个机器储存了同样的数据. 1.在某个时间,如果得到一个数据文件ID的列表,是否能够快速地找 ...

  10. iOS端VR视频播放（转自简书http://www.jianshu.com/p/1ee1a0d1d320）

    下面是我看了谷歌的一个VR在iOS端开发的文档写的一个demo. 第一步是需要用cocoaPods导入谷歌开发的一个第三方:CardboardSDK,怎么导入就不多说了,这里需要注意的一点是谷歌方面的 ...