js 判断上传文件大小及格式代码


Posted in Javascript onNovember 13, 2013

我们在做文件上传时,为了实现异步上传的效果,一般会选择采用iframe的形式来进行文件的上传,但我们不能像ajax那样对服务端返回的数据进行处理,从而来进行文件大小以及文件样式的判断,所以我们一般也会想到使用js对上传的文件大小以及格式进行初步的判断,在服务端再进行一次判断(防止浏览器拒绝执行脚本文件)。
以下提供一种方法用js判断文件大小。

var url = window.location.href, type = url.substr(url.lastIndexOf('/')+1); 
// console.log(type); 
var allowType = { 
".bmp":1, ".png":1, ".jpeg":1, ".jpg":1, ".gif":1, 
".mp3":2, ".wma":2, ".wav":2, ".amr":2, 
".rm":3, ".rmvb":3, ".wmv":3, ".avi":3, ".mpg":3, ".mpeg":3, ".mp4":3 
}; 
var allowSize = {1:2097152, 2:5242880, 3:20971520}; 
var errMsg = { 
"0" : '图片格式不正确<br/>' 
+ '音频格式不正确<br/>' 
+ '视频格式不正确<br/>', 
"1" : ‘图片格式不正确', 
"2" : '音频格式不正确', 
"3" : '视频格式不正确' 
}; 
var errSizeMsg = { 
'1':'图片文件小于2M', 
'2':'音频文件小于5M', 
'3':'视频文件小于20M', 
} 
function checkFileType(filename, type){ 
var ext = filename.substr(filename.lastIndexOf(".")).toLowerCase(), 
res = allowType[ext]; 
if (type == 0) { 
return !!res; 
} else { 
return type == res; 
} 
} 
function checkFileSize(target, size){ 
var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 
var fileSize = 0; 
if (isIE && !target.files) 
{ 
var filePath = target.value; 
var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); 
var file = fileSystem.GetFile (filePath); 
fileSize = file.Size; 
} else { 
fileSize = target.files[0].size; 
} 
// var fsize = fileSize / 1024*1024; 
if(parseInt(fsize) >= parseInt(size)){ 
return false; 
}else{ 
return true; 
} 
} 
function upload(obj){ 
var filename = jQuery.trim(jQuery('#uploadFile').val()); 
if (!filename || filename == ""){ // 提交前的再次检测 
alert('选择需要上传的文件'); 
return false; 
} 
if (!checkFileType(filename, type)){ 
alert('文件格式不正确'); 
return false; 
} 
var ext = filename.substr(filename.lastIndexOf(".")).toLowerCase(); 
var res = allowType[ext]; 
if(!checkFileSize(obj,allowSize[res])){ 
alert(errSizeMsg[res]); 
return false; 
} 
//其他处理 
} 
//uploadFile为上传控件的id,obj为上传控件的本身(this)
Javascript 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
MVVM 双向绑定的实现代码
Jun 21 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
php跨域调用json的例子
Nov 13 #Javascript
JQuery文字列表向上滚动的代码
Nov 13 #Javascript
浅析Javascript使用include/require
Nov 13 #Javascript
js将字符串转成正则表达式的实现方法
Nov 13 #Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 #Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 #Javascript
HTTP 304错误的详细讲解
Nov 13 #Javascript
You might like
PHP的PSR规范中文版
2013/09/28 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php实现读取内存顺序号
2015/03/29 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
VUE中的无限循环代码解析
2017/09/22 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python 调整图片亮度的示例
2020/12/03 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
有个性的自我评价范文
2013/11/15 职场文书
社区中秋节活动方案
2014/01/29 职场文书
新品发布会策划方案
2014/06/08 职场文书
企业法人代表证明书
2014/09/27 职场文书
2014最新实习证明模板
2014/10/02 职场文书
高中历史教学反思
2016/02/19 职场文书
Java异常体系非正常停止和分类
2022/06/14 Java/Android