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

摘要:
[二]、示例测试代码:filesize-check.html1234567jscheckfilesize@www.micmiu.com8910111213141516varmaxsize=2*1024*1024;//2M17varerrMsg="上传的附件文件不能超过2M!!!";18vartipMsg="您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过2M,建议使用IE、FireFox、Chrome浏览器。

目录

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

测试上传的文件大小:

javascript实现限制上传文件的大小第1张

各浏览器中的效果如下:

IE8:

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

javascript实现限制上传文件的大小第3张

FF(11.0):

javascript实现限制上传文件的大小第4张

Chrome(19.0.1084.56 m):

javascript实现限制上传文件的大小第5张

—————–

免责声明:文章转载自《javascript实现限制上传文件的大小》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇vue-created数论及其应用——密码学中的数论下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

解决autocomplete=off在Chrome中不起作用的方法

大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为"on",也可以省略属性名,直接写入关键字on或off。 网站项目中,有登录和注册的弹框,在除chrome的浏览器中一切都ok,一旦在谷歌浏览器中,问题来了:首先从登录弹框中登陆成功,chrome会弹出...

UI 自动化中如何处理上传文件事件

在UI自动化中,我们经常会遇到上传文件操作。处理上传事件是一个比较麻烦的操作,因为点击上传控件会弹出Windows窗口供用户选择文件,但是Windows窗口是浏览器之外的组件,所以selenium本身无法处理这个windows窗口。这里给大家几个处理思路,我们先看一下下面这个HTML。   <html> <head> <...

Selenium 4以后,再不相见的API

Selenium4前线快报中提到了Selenium 4的最新进展,伴随着Selenium 4各种功能的增强,最近的版本中也包含了一些旧API的更改和启用。如果你准备从Selenium 3升级到Selenium 4,那么最好留意这些更新。 文中所列的API,看样子要跟所有Seleniumer说再见了! 弃用DesiredCapabilities 在Selen...

常见浏览器修改User-Agent的方法

  本文列出了几款常见浏览器修改User-Agent的方法。   1. Chrome 方法一:   依次打开 开发者工具 > More tools > Network conditions,在User agent中选择或自定义相应值。   方法二:   添加启动参数 --user-agent="自定义的User-Agent值",可在命令行或快捷...

Alert弹出框处理

selenium的API提供了Alert类对alert弹出框的处理的方法,涉及到的方法有text,dismiss(),accept()和send_keys(),在javascript中主要有alert弹出警告框,confirm弹出确认框,prompt弹出输入框。selenium操作alert需要导入Alert的发类,具体为:from selenium.we...

Chrome实用调试技巧

如今Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁、大量的应用插件,良好的代码规范支持、强大的V8解释器之外,还因为Chrome开发者工具提供了大量的便捷功能,方便我们前端调试代码,我们在日常开发中是越来越离不开Chrome,是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆。 介绍Chrome调试技巧的文章很多,本文结合我自...