真正好用的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 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 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+Ajax实现表单验证的详解
2013/06/25 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
Python struct模块解析
2014/06/12 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
django自带调试服务器的使用详解
2019/08/29 Python
tensorflow 查看梯度方式
2020/02/04 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
最新个人职业生涯规划书
2014/01/22 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
顶碗少年教学反思
2014/02/21 职场文书
利群广告词
2014/03/20 职场文书
捐资助学倡议书
2014/04/15 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
荒岛余生观后感
2015/06/09 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers