客户端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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
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判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php设计模式之单例模式代码
2016/06/11 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
纯JS实现轮播图
2017/02/22 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
javascript实现移动端红包雨页面
2020/06/23 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
python字符串,数值计算
2016/10/05 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
Python datetime模块的使用示例
2021/02/02 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
老人祝寿主持词
2014/03/28 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
呼兰河传读书笔记
2015/06/30 职场文书