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技术-屏蔽类
Aug 15 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
jQuery ajax应用总结
Jun 02 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
封装微信小程序http拦截器过程解析
Aug 13 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/11/25 PHP
深入php self与$this的详解
2013/06/08 PHP
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
python 从远程服务器下载东西的代码
2013/02/10 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
对python中的logger模块全面讲解
2018/04/28 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
《圆明园的毁灭》教学反思
2014/02/28 职场文书
2014年度考核工作总结
2014/12/24 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
go开发alertmanger实现钉钉报警
2021/07/16 Golang