真正好用的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中Event属性搜集整理
Sep 17 Javascript
js中settimeout方法加参数
Feb 28 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
JS数组去重详情
Nov 07 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
js转html实体的方法
2016/09/27 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
微信小程序自定义单项选择器样式
2019/07/25 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python绘制圆柱体的方法
2018/07/02 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
机关门卫岗位职责
2013/12/30 职场文书
工程招投标邀请书
2014/01/26 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
个人授权委托书
2014/09/15 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
公司人事任命通知
2015/04/20 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
四十九个javascript小知识实用技巧
2021/11/20 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js
ant design charts 获取后端接口数据展示
2022/05/25 Javascript