客户端js判断文件类型和文件大小即限制上传大小


Posted in Javascript onNovember 20, 2013

由于项目需要!需要脚本在客户端判断大小和文件类型!自己网上找资料找的好辛苦!索性自己写了一个并测试 文件上传大小限制的一个例子,兼容ie6,ie7,ie8 ,Google Chrome,ff等浏览器

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 
function fileChange(target,id) { 
var fileSize = 0; 
var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"]; 
var filepath = target.value; 
var filemaxsize = 1024*2;//2M 
if(filepath){ 
var isnext = false; 
var fileend = filepath.substring(filepath.indexOf(".")); 
if(filetypes && filetypes.length>0){ 
for(var i =0; i<filetypes.length;i++){ 
if(filetypes[i]==fileend){ 
isnext = true; 
break; 
} 
} 
} 
if(!isnext){ 
alert("不接受此文件类型!"); 
target.value =""; 
return false; 
} 
}else{ 
return false; 
} 
if (isIE && !target.files) { 
var filePath = target.value; 
var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); 
if(!fileSystem.FileExists(filePath)){ 
alert("附件不存在,请重新输入!"); 
return false; 
} 
var file = fileSystem.GetFile (filePath); 
fileSize = file.Size; 
} else { 
fileSize = target.files[0].size; 
} var size = fileSize / 1024; 
if(size>filemaxsize){ 
alert("附件大小不能大于"+filemaxsize/1024+"M!"); 
target.value =""; 
return false; 
} 
if(size<=0){ 
alert("附件大小不能为0M!"); 
target.value =""; 
return false; 
} 
} 
</script> 
</head> 
<body> 
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/> 
</body> 
</html>
Javascript 相关文章推荐
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
理解jquery事件冒泡
Jan 03 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 #Javascript
使用js简单实现了tree树菜单
Nov 20 #Javascript
js 用CreateElement动态创建标签示例
Nov 20 #Javascript
JS实现字体选色板实例代码
Nov 20 #Javascript
jquery实现树形二级菜单实例代码
Nov 20 #Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 #Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 #Javascript
You might like
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
js实现随机点名
2021/01/19 Javascript
Python应用库大全总结
2018/05/30 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
html5使用canvas画一条线
2014/12/15 HTML / CSS
应届生体育教师自荐信
2013/10/03 职场文书
表决心的诗句大全
2014/03/11 职场文书
委托书样本
2014/04/02 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
离婚协议书样本
2015/01/26 职场文书
大学学生个人总结
2015/02/15 职场文书
2015年工会工作总结
2015/03/30 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python