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 相关文章推荐
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
vue实现短信验证码输入框
Apr 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获取今日开始时间和结束时间的方法
2017/02/27 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
简单使用Python自动生成文章
2014/12/25 Python
python实现redis三种cas事务操作
2017/12/19 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
浅析Python四种数据类型
2018/09/26 Python
详解python中的Turtle函数库
2018/11/19 Python
python使用递归的方式建立二叉树
2019/07/03 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
python的数学算法函数及公式用法
2020/11/18 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
毕业生个人求职信范例分享
2013/12/17 职场文书
技能比武方案
2014/05/21 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年度培训工作总结
2014/11/27 职场文书
学生退学证明
2015/06/23 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python