js检测上传文件大小
前言:
项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端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检测上传文件大小的更多相关文章
- 兼容各浏览器的js判断上传文件大小
由于项目需要,在网上找了一个JS判断上传文件大小的程序,经测试兼容IE6-,Firefox10,Opera11.,safari5.,chrome17 <!DOCTYPE html> < ...
- js判断上传文件大小
下面提供三款网页特效判断上传文件大小哦,这三种方法是现在限制文件上传大小比较好的方法,可以在客户上传文件时限制上传文件大小判断处理<!doctype html public "-//w ...
- 经典JS 判断上传文件大小和JS即时同步电脑时间
我也是新手,还是一个JS笨,有一些网站要实现的功能要自己写么? 答案是不会,去问同事大佬吧,闲简单.就在晚上看了一些其他大佬们写的JS效果, 代码很少.占用网站CPU也小的多.可以一用, 废话少扯.代 ...
- js 限定上传文件大小 类型
方案1 :限定大小 <html> <head> <script type="text/javascript"> var isIE = /ms ...
- js判断上传文件的类型和大小
//检测文件大小和类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value ...
- asp.net修改上传文件大小
我们大家都知道ASP.NET为我们提供了文件上传服务器控件FileUpload,默认情况下可上传的最大文件为4M,如果要改变可上传文件大小限制,那么我们可以在web.config中的httpRunti ...
- js 文件上传进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js实现上传文件夹
上传大文件的解决方案 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端 ...
- js限制上传文件类型和大小
<html> <head> <script type="text/javascript"> function fileChange(target ...
随机推荐
- 关于javascript异步编程的理解
在开发手机app的时候,要使用ajax想向后台发送数据.然后遇到了一个bug,通过这个bug,理解了ajax异步请求的工作原理.下面是登录页面的源代码. <!DOCTYPE html> & ...
- HDU 2061 Treasure the new start, freshmen!
http://acm.hdu.edu.cn/showproblem.php?pid=2061 Problem Description background:A new semester comes , ...
- input、textArea实时显示剩余可输入的字数
<h2>实时显示剩余可输入的字数(字母,数字,中文都算一个字)</h2> <h>昵称:</h> <div> <input type=& ...
- 增加kms计数
@echo offset skms=10.15.68.62for %%i in (. . . . . . . . . . . . . . . . . . . . . . . . . .) do cal ...
- JAVA里面的“指针”
JAVA里面的“指针” 众所周知,在java里面是没有指针的.那为何此处还要说java里面的“指针”呢?我们知道在C/C++中,指针是指向内存中的地址.那么在Java里 ...
- laravel4 「时间戳」问题
默认 Eloquent 会自动维护数据库表的 created_at 和 updated_at 字段.只要把这两个「时间戳」字段加到数据库表, Eloquent 就会处理剩下的工作.如果不想让 Eloq ...
- java多线程 -- ForkJoinPool 分支/ 合并框架 工作窃取
Fork/Join 框架:就是在必要的情况下,将一个大任务,进行拆分(fork)成若干个小任务(拆到不可再拆时),再将一个个的小任务运算的结果进行 join 汇总. Fork/Join 框架与线程池的 ...
- Unhandled rejection RangeError: Maximum call stack size exceededill install loadIdealTree
npm安装时候报这个错误,解决方法如下: 删除项目中的 package-lock.json 文件 和 node_modules 文件夹,然后再尝试 npm install 详细参考
- 解题:CQOI 2017 老C的方块
题面 看起来很像网络流的二分图套路题,然后我们大力观察(题目定义的相邻我用引号括起来,应该能看懂) 发现“相邻”的一对方格如果各自连着一个一个方格就gg了,于是对于所有这些“相邻”的方格,我们有两种选 ...
- 团体程序设计天梯赛 L2-028. 秀恩爱分得快
1.输入-0(第一部分.第二部分),输出-02.只统计与两个人的亲密程度,否则超时 Data: 4 14 -0 1 -2 3-0 1 -0 1 ------ 4 1 3 1 -2 3-0 1 -0 1 ...