博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[转]javascript实现限制上传文件的大小
阅读量:4702 次
发布时间:2019-06-10

本文共 2116 字,大约阅读时间需要 7 分钟。

本文转自:

目录

  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"" ">
2 < html xmlns = "  " >
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):

 

—————–

原创文章,转载请注明:转载自 [  ]

本文链接地址: 

 

转载于:https://www.cnblogs.com/freeliver54/p/3445795.html

你可能感兴趣的文章
CF1179C Serge and Dining Room
查看>>
CF1168B Good Triple
查看>>
CF1208E Let Them Slide
查看>>
CF1086E Beautiful Matrix
查看>>
在单位上班的25条建议(建议收藏)
查看>>
web前端--http协议
查看>>
欧拉定理证明&阶乘的逆元
查看>>
Prime Game Gym - 101981J(网络流/二分图)
查看>>
Teamwork Gym - 101492E (dp)
查看>>
No Link, Cut Tree! Gym - 101484F(dp)
查看>>
Coprimes Gym - 101492C(bitset)
查看>>
Partial Tree UVALive - 7190(完全背包)
查看>>
『深度应用』NLP机器翻译深度学习实战课程·零(基础概念)
查看>>
『开发技术』Windows极简安装使用face_recognition实现人脸识别
查看>>
『深度应用』NLP命名实体识别(NER)开源实战教程
查看>>
『开发技术』GPU训练加速原理(附KerasGPU训练技巧)
查看>>
『深度应用』NLP机器翻译深度学习实战课程·壹(RNN base)
查看>>
『深度应用』一小时教你上手MaskRCNN·Keras开源实战(Windows&Linux)
查看>>
『王霸之路』从0.1到2.0一文看尽TensorFlow奋斗史
查看>>
系统测试中需要注意的点
查看>>