真正好用的js验证上传文件大小的简单方法


Posted in Javascript onOctober 27, 2016

最近使用到一个文件上传功能,发现恶意上传一个2G文件时,后台处理响应较慢,遂想到能否使用js来进行客户端的验证。但查阅网上多处资料,均使用 ActiveXObject("Scripting.FileSystemObject"); 的方法,该方法需要将Internet选项中安全级别提高,启用一个系统本身不推荐的选项,会出现如下非常不友好的提示:

真正好用的js验证上传文件大小的简单方法

所以这边并没有用到,而是寻求其他方法。

这边新的思路是img标签中的dynsrc属性。

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

具体方法如下:

<!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@www.micmiu.com" /> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>js check file size @ www.micmiu.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>

以上就是小编为大家带来的真正好用的js验证上传文件大小的简单方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
Vue基础配置讲解
Nov 29 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 #Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 #Javascript
简单理解vue中Props属性
Oct 27 #Javascript
利用React-router+Webpack快速构建react程序
Oct 27 #Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 #Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 #Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
python3实现暴力穷举博客园密码
2016/06/19 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python中装饰器学习总结
2018/02/10 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python中PyQuery库用法分享
2021/01/15 Python
我的中国梦演讲稿600字
2014/08/19 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python