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 相关文章推荐
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
新手简单了解vue
May 29 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
js模拟类继承小例子
2010/07/17 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
详细分析Node.js 模块系统
2020/06/28 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python根据经纬度计算距离示例
2014/02/16 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
省优秀教师事迹材料
2014/01/30 职场文书
报到证办理个人委托书
2014/10/06 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书