客户端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 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
js获取ip和地区
Mar 10 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
JavaScript实现雪花飘落效果
Dec 27 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实现session自定义会话处理器的方法
2015/01/27 PHP
隐性调用php程序的方法
2015/06/13 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
js实现拖拽功能
2017/03/01 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python编程实现正则删除命令功能
2017/08/30 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
美国家居装饰店:Pier 1
2019/09/04 全球购物
会计电算化专业毕业生推荐信
2013/12/24 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
学校督导评估方案
2014/06/10 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
社区党建工作总结2015
2015/05/13 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python