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中Array 对象相关的几个方法
Dec 22 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
javascript工具库代码
Mar 29 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
JavaScript实现简单音乐播放器
Apr 17 Javascript
如何能分清npm cnpm npx nvm
Jan 17 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常用Output和ptions/Info函数集介绍
2013/06/19 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
django 多数据库配置教程
2018/05/30 Python
python3中zip()函数使用详解
2018/06/29 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
性能测试工程师的面试题
2015/02/20 面试题
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
单位同意报考证明
2015/06/17 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android