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 11 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 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 分页类 扩展代码
2009/06/11 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python函数嵌套实例
2014/09/23 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
求职简历自荐信
2013/10/20 职场文书
销售经理工作职责
2014/02/03 职场文书
毕业设计说明书
2014/05/07 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2015年统战工作总结
2015/05/19 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
python实现图片批量压缩
2021/04/24 Python
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
python 安全地删除列表元素的方法
2022/03/16 Python