真正好用的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 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP类型约束用法示例
2016/09/28 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
asp 取文本框名称代码
2008/12/02 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
Vue全局分页组件的实现代码
2018/08/10 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Django卸载之后重新安装的方法
2017/03/15 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
如何获取Python简单for循环索引
2019/11/21 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
html5 canvas 使用示例
2010/10/22 HTML / CSS
小学一年级学生评语
2014/04/22 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
python字符串常规操作大全
2021/05/02 Python
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers