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,水平有待提高
Jan 31 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
css配合jquery美化 select
2013/11/29 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
基于vuex实现购物车功能
2021/01/10 Vue.js
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
Python 实现一个计时器
2020/07/28 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
汽车驾驶求职信
2013/10/25 职场文书
团支部建设方案
2014/05/02 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
学雷锋广播稿大全
2015/08/19 职场文书