前言:

  项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端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. 一致性Hash算法(KetamaHash)的c#实现

    Consistent Hashing最大限度地抑制了hash键的重新分布.另外要取得比较好的负载均衡的效果,往往在服务器数量比较少的时候需要增加虚拟节点来保证服务器能均匀的分布在圆环上.因为使用一般的 ...

  2. cxGrid 单元格回车移到下一行,当移到最后一个单元格时回车新增一行【转】

    1 在TcxGridDBTableView中,设定属性 NewItemRow.Visible = True 2 在cxgrid中输入数据怎样回车换行  在TcxGridDBTableView中  将属 ...

  3. ng-include 上ng-controller 无法获取控件

    A.Html内容如下 <div> <div kendo-grid="testGrid" k-options="testOptions"> ...

  4. 使用SQLyog连接MySQL数据库

    [学习笔记]使用SQLyog连接MySQL数据库 一.使用SQLyog创建数据库用来管理学生信息 复制代码 1 #创建数据库student  2 DROP DATABASE IF EXISTS Mys ...

  5. 前端基础:HTTP 状态码详解

    HTTP 状态码详解 1xx(信息类):表示接收到请求并继续处理 100 客户端应当继续发送请求.这个临时响应是用来通知客户端他的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部 ...

  6. 关于 Source Engine 2007 网络通信的分析

    最近在写自己的游戏引擎,主要是参考Quake和GoldSrc和SourceEngine2007,其中SourceEngine2007代码比较新一些. 对比了这几个引擎的代码,前两者代码比较简单,基于C ...

  7. Qt——基本工具的使用

    本文主要介绍在windows系统中使用C++编写Qt程序所需要的一些工具,不会具体地讲工具怎么使用. 其它系统的安装本文不会涉及,在http://wiki.qt.io/Main中,有关于各种系统qt安 ...

  8. P2461 [SDOI2008]递归数列

    题目描述 一个由自然数组成的数列按下式定义: 对于i <= k:ai = bi 对于i > k: ai = c1ai-1 + c2ai-2 + ... + ckai-k 其中bj 和 cj ...

  9. c++11 可变参数模板函数

    c++11 可变参数模板函数 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #in ...

  10. CF662C Binary Table 【状压 + FWT】

    题目链接 CF662C 题解 行比较少,容易想到将每一列的状态压缩 在行操作固定的情况下,容易发现每一列的操作就是翻转\(0\)和\(1\),要取最小方案,方案唯一 所以我们只需求出每一种操作的答案 ...