前言:

  项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端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. java集合LinkedList

    基于jdk_1.8.0 关于List,主要是有序的可重复的数据结构.jdk主要实现类有ArrayList(底层使用数组).LinkedList(底层使用双向链表) LinkedList: (一)继承关 ...

  2. Unity发布Windows程序遇到的问题

    Unity版本:5.6.2 因为程序中使用了Networking模块,所以在打包发布的时候需要登录Unity的账号,并做设置. 错误信息如下: 解决办法如下: 先登录Unity账号,并在Service ...

  3. PHP-时间函数

    1.时间格式化函数date(format,timestamp) format 时间格式 timestamp 时间戳 下面列出了一些常用于日期的字符: d - 表示月里的某天(01-31) m - 表示 ...

  4. MVC框架理解及优缺点

    MVC:模型(Model).视图(View).控制器(Control) 流程如下: 首先是视图向控制器发送请求,控制器再将业务请求发送给模型, 然后模型处理请求业务并把结果返回给控制器,控制器根据结果 ...

  5. web.config文件详解[转]

    一).Web.Config是以XML文件规范存储,配置文件分为以下格式1.配置节处理程序声明特点: 位于配置文件的顶部,包含在<configSections>标志中.2.特定应用程序配置特 ...

  6. mysql实现消息队列

    mysql之消息队列   消息队列:在消息的传输过程中保存消息的容器. 消息队列管理器在将消息从它的源中继到它的目标时充当中间人.队列的主要目的是提供路由并保证消息的传递:如果发送消息时接收者不可用, ...

  7. CentOS7无法使用tab补全功能??

    Centos7在使用最小化安装的时候,没有安装自动补全的包,需要自己手动安装. yum -y install bash-completion 或者你可以安装一些初始化的包组 yum -y groupi ...

  8. 动态生成lookup字段

    var  i: Integer;begin  //ADOQuery已打开   //在数据集打开的情况下新增加一个字段  with Self.ADOQuery1 do  begin    TDataSe ...

  9. behavior

    http://www.css88.com/book/css/properties/only-ie/behavior.htm 语法: behavior:<url> | url(#objID) ...

  10. 【uoj#143】[UER #5]万圣节的数列 构造

    题目描述 给出一个的数列,将其重新排列,使得其等差子序列的数目最小.输出一种可能的排列后的数列. 题解 构造 那天和 EdwardFrog 讨论 bzoj2124 的构造时突然有的灵感,最后发现就是这 ...