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简单日历实现代码
Oct 05 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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的开合式多级菜单程序
2006/10/09 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
动态加载iframe
2006/06/16 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
前端微信支付js代码
2016/07/25 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python实现从web抓取文档的方法
2014/09/26 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python_mask_array的用法
2020/02/18 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
数学专业毕业生自荐信
2013/11/10 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
运动会演讲稿50字
2014/08/25 职场文书
小石潭记导游词
2015/02/03 职场文书
大学生自我评价范文
2015/03/03 职场文书
2016年十一促销广告语
2016/01/28 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL