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 相关文章推荐
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
详解ES6中的let命令
Apr 05 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
vue-router中hash模式与history模式的区别
Jun 23 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
PHP入门速成(2)
2006/10/09 PHP
PHP4之真OO
2006/10/09 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
js代码实现轮播图
2020/05/04 Javascript
js实现轮播图特效
2020/05/28 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
英语专业毕业生自荐信范文
2013/12/31 职场文书
见习期自我鉴定
2014/01/31 职场文书
2014年信访工作总结
2014/11/17 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL