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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
leaflet的开发入门教程
Nov 17 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python网络编程详解
2017/10/31 Python
python的unittest测试类代码实例
2017/12/07 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python使用udp实现聊天器功能
2018/12/10 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
愚人节活动策划方案
2014/03/11 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python