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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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文件操作实例代码
2012/05/10 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
浅析Python多线程下的变量问题
2015/04/28 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
python Timer 类使用介绍
2020/12/28 Python
Django实现简单的分页功能
2021/02/22 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
实习教师自我鉴定
2013/09/27 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis