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 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 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
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python Pygame的具体使用讲解
2017/11/03 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
Python扫描端口的实现
2021/01/25 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
人力资源职位说明书
2014/07/29 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
护理实习生带教计划
2015/01/16 职场文书
八一建军节慰问信
2015/02/14 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技