前言:

  项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。

  代码很简单,关键就是怎么用JS拿到文件然后获取文件大小,进而去判断拦截。由于各种历史原因,IE的ActiveX控件因素,获取文件的方法可能和其他浏览器有所不同,所以只需稍加判断即可。

JS代码:

<script type="text/javascript">
// 判断是否为IE浏览器: /msie/i.test(navigator.userAgent) 为一个简单正则
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target){
var fileSize = 0;
if (isIE && !target.files) { // IE浏览器
var filePath = target.value; // 获得上传文件的绝对路径
/**
* ActiveXObject 对象为IE和Opera所兼容的JS对象
* 用法:
* var newObj = new ActiveXObject( servername.typename[, location])
* 其中newObj是必选项。返回 ActiveXObject对象 的变量名。
* servername是必选项。提供该对象的应用程序的名称。
* typename是必选项。要创建的对象的类型或类。
* location是可选项。创建该对象的网络服务器的名称。
*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
* Scripting.FileSystemObject 为 IIS 内置组件,用于操作磁盘、文件夹或文本文件,
* 其中返回的 newObj 方法和属性非常的多
* 如:var file = newObj.CreateTextFile("C:\test.txt", true) 第二个参表示目标文件存在时是否覆盖
* file.Write("写入内容"); file.Close();
*/
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
// GetFile(path) 方法从磁盘获取一个文件并返回。
var file = fileSystem.GetFile(filePath);
fileSize = file.Size; // 文件大小,单位:b
}
else { // 非IE浏览器
fileSize = target.files[0].size;
}
var size = fileSize / 1024 / 1024;
if (size > 1) {
alert("附件不能大于1M");
}
}
</script>

HTML代码

<input type="file"  style="width: 500px;" onchange="fileChange(this);"/>

  一个 简单、轻便、快捷 的用JS代码来判断文件大小的方法就OK了,至于ActiveXObject对象感兴趣的可以去深究,它可以根据入参的不同返回不同的对象,通常该对象的功能和作用也是非常有用和强大的。

ps:欢迎转载,转载请注明出处:http://www.cnblogs.com/liuyitian/p/4275430.html

                          写作不易,难免有疏漏和错误,还请慷慨指正,不错请推荐


                                    每天多学一点点     代码少敲一点点 

js检测上传文件大小的更多相关文章

  1. 兼容各浏览器的js判断上传文件大小

    由于项目需要,在网上找了一个JS判断上传文件大小的程序,经测试兼容IE6-,Firefox10,Opera11.,safari5.,chrome17 <!DOCTYPE html> < ...

  2. js判断上传文件大小

    下面提供三款网页特效判断上传文件大小哦,这三种方法是现在限制文件上传大小比较好的方法,可以在客户上传文件时限制上传文件大小判断处理<!doctype html public "-//w ...

  3. 经典JS 判断上传文件大小和JS即时同步电脑时间

    我也是新手,还是一个JS笨,有一些网站要实现的功能要自己写么? 答案是不会,去问同事大佬吧,闲简单.就在晚上看了一些其他大佬们写的JS效果, 代码很少.占用网站CPU也小的多.可以一用, 废话少扯.代 ...

  4. js 限定上传文件大小 类型

    方案1 :限定大小 <html> <head> <script type="text/javascript">   var isIE = /ms ...

  5. js判断上传文件的类型和大小

    //检测文件大小和类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value ...

  6. asp.net修改上传文件大小

    我们大家都知道ASP.NET为我们提供了文件上传服务器控件FileUpload,默认情况下可上传的最大文件为4M,如果要改变可上传文件大小限制,那么我们可以在web.config中的httpRunti ...

  7. js 文件上传进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. js实现上传文件夹

    上传大文件的解决方案 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端 ...

  9. js限制上传文件类型和大小

    <html> <head> <script type="text/javascript"> function fileChange(target ...

随机推荐

  1. [usaco]2013-jan Liars and Truth Tellers 真假奶牛

    Description 约翰有N头奶牛,有一部分奶牛是真话奶牛,它们只说真话,而剩下的是假话奶牛,只说假话.有一天,约翰从奶牛的闲谈中陆续得到了M句话,第i句话出自第Xi头奶牛,它会告诉约翰第Yi头是 ...

  2. @Dataprovider 和 @Factory 的使用

    总结: 0.@Dataprovider 所修饰的方法必须  return Object[][] ; @Facotry 所修饰的方法必须return Object[] ; 1.在测试场景中经常会遇到一个 ...

  3. 3 vue-router 的默认hash 改mode:history去除#号 传参

    npm install vue-router --save      //安装 传参

  4. (很难啊)如何实时获取DBGrid 中当前单元格输入的内容? [问题点数:100分,结帖人yifawu100]

    如何获取DBGrid 中当前单元格输入的内容? 还没输入完成,我想实时获取 Cell中的内容,以便作其他处理,用什么事件呢? 所以Field的Onchange事件是没用的. DBGrid1.Selec ...

  5. Ubuntu和Windows相互共享文件夹

    一.Ubuntu访问Windows共享文件夹 1.对需要共享文件夹右击->属性->共享 2.选择要与其共享的用户,选择好用户点击有点添加按钮添加,然后点击下方的共享按钮 3.完成共享 4. ...

  6. 深度学习读书笔记之RBM(限制波尔兹曼机)

    深度学习读书笔记之RBM 声明: 1)看到其他博客如@zouxy09都有个声明,老衲也抄袭一下这个东西 2)该博文是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的 ...

  7. c++11 继承控制:final和override

    c++11 继承控制:final和override #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <str ...

  8. ORA-01034和ORA-27101的解决方法

    问题所在: 1.要登录的数据库实例内容配置内容错误,联系负责该机子的管理员看原因

  9. dp的一些计划

    抱歉这是鸽子贴. 树形dp [x][[POI2014]HOT-Hotels](https://www.luogu.org/problemnew/show/P3565) [x][[HAOI2015]树上 ...

  10. 设置nginx日志滚动

    需求:设置nginx每天凌晨12点轮转,系统版本为debian7,nginx版本为tengine2.2.0 1.修改logrotate主配置文件,打开压缩和以时间为后缀命名 # vim /etc/lo ...