客户端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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
javascript 常用方法总结
Jun 03 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
Vue实现数据请求拦截
Oct 23 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
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
python中怎么表示空值
2020/06/19 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
Python修改DBF文件指定列
2020/12/19 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
海南地接欢迎词
2014/01/14 职场文书
医院保洁服务方案
2014/06/11 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
单位介绍信格式范文
2015/05/04 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
班委竞选稿范文
2015/11/21 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
MySQL transaction事务安全示例讲解
2022/06/21 MySQL