javascrip客户端验证文件大小及文件类型并重置上传


Posted in Javascript onJanuary 12, 2011

下面是我写的一个通用的javascrip脚本,虽然调用时需要赋的参数比较多,但都是实际需要中真正需要使用到的。各位可以参考,并改成自己需要的脚本。

/*****获取文件信息 edit by zhaogw 参考by misssionOtherAttEdit.jsp*****/ 
/*file:input type="file"的对象,一般用this。 
vType:一个对象名,用于记录文件的文件类型信息。一般为input对象。 
DivType:一个Div对象的名称。把其innerHTML内容用于显示文件的类型信息。 
vFile:一个对象名,用于记录文件的文件名信息。一般为input对象。 
DivFile:一个Div对象的名称。把其innerHTML内容用于显示文件的文件名信息。 
vSize,DivSize同上面类似,只是记录文件的大小信息。 
mMaxSize:以m为单位计算其允许上传的最大文件大小。 
allowType:只接受的文件类型 
*/ 
function getFileInfo(file,mMaxSize,allowType,vFile,DivFile,vType,DivType,vSize,DivSize){ 
var filePath = file.value;//文件路径 
var fileName;//文件名 
var fileType;//文件类型 
var tmpObj;//临时对象 
var notAllowType=new Array("exe","bat","asp","jsp","js","dll"); 
var mHTML=document.getElementById(file.name+'Td').innerHTML; 
/* 
var mHTML="<input type='file' name='"+ 
file.name+"' class='input100' id='"+file.id+ 
"' Tip='无法上传空文件' contentEditable='false' tmt:required='true' focusTips='请输入文件名' onChange='getFileInfo(this,"+ 
mMaxSize+",\""+allowType+"\",\""+vFile+"\",\""+DivFile+"\",\""+vType+"\",\""+DivType+"\",\""+vSize+"\",\""+DivSize+"\")'>"; 
*/ 
// alert(mHTML); 
//get file name 
if(filePath != null && filePath != ''){ 
var pass=true; 
//文件类型 
fileType = filePath.substring(filePath.lastIndexOf('.') + 1,filePath.length); 
if (fileType!=null&&fileType!='') 
{ 
for (var i in notAllowType){ 
if (fileType.toLowerCase()==notAllowType[i]){ 
pass=false; 
break;} 
} 
} 
//允许的类型,空的话就不设置允许类型 
var match=false; 
if (allowType!=null&&allowType!=''){ 
var allowList=allowType.split('|'); 
for (var j in allowList){ 
if (fileType.toLowerCase()==allowList[j].toLowerCase()){ 
match=true; 
break;} 
} 
} else {match=true;} 
if (pass&&match) 
{ 
fileName = filePath.substring(filePath.lastIndexOf('\\') + 1,filePath.length); 
tmpObj=document.getElementById(vType); 
if (tmpObj!=null) 
tmpObj.value = fileType; 
tmpObj=document.getElementById(DivType); 
if (tmpObj!=null) 
tmpObj.innerHTML = fileType; 
tmpObj=document.getElementById(vFile); 
if (tmpObj!=null) 
tmpObj.value = fileName; 
tmpObj=document.getElementById(DivFile); 
if (tmpObj!=null) 
tmpObj.innerHTML = fileName; 
try{ 
var fso,f,s; 
fso = new ActiveXObject("Scripting.FileSystemObject"); 
f = fso.GetFile(file.value); 
if(f.Size > mMaxSize*1048576){ 
alert("文件大小不能超过"+mMaxSize+"M"); 
document.getElementById(file.name+'Td').innerHTML = mHTML; 
tmpObj=document.getElementById(vType); 
if (tmpObj!=null) 
tmpObj.value = ''; 
tmpObj=document.getElementById(DivType); 
if (tmpObj!=null) 
tmpObj.innerHTML = ''; 
tmpObj=document.getElementById(vFile); 
if (tmpObj!=null) 
tmpObj.value = ''; 
tmpObj=document.getElementById(DivFile); 
if (tmpObj!=null) 
tmpObj.innerHTML = ''; 
tmpObj=document.getElementById(vSize); 
if (tmpObj!=null) 
tmpObj.value = ''; 
tmpObj=document.getElementById(DivSize); 
if (tmpObj!=null) 
tmpObj.innerHTML = ''; 
return; 
} 
else 
{ 
tmpObj=document.getElementById(vSize); 
if (tmpObj!=null) 
tmpObj.value = f.Size; 
tmpObj=document.getElementById(DivSize); 
if (tmpObj!=null) 
tmpObj.innerHTML = f.Size+" byte(字节)"; 
var imgType=new Array("jpg","jpeg","gif","bmp"); 
var isImg=false; 
//文件类型 
if (fileType!=null&&fileType!='') 
{ 
for (var k in imgType){ 
if (fileType.toLowerCase()==imgType[k]){ 
isImg=true; 
break;} 
} 
} 
var tmpObj=document.getElementById("imgView"); 
if (isImg&&tmpObj){ 
var y = document.getElementById(file.name+"img"); 
if(y){ 
y.src = "file://localhost/" + file.value; 
}else{ 
var img=document.createElement("img"); 
img.setAttribute("src","file://localhost/"+file.value); 
img.setAttribute("width","120"); 
img.setAttribute("height","90"); 
img.setAttribute("id",file.name+"img"); 
tmpObj.appendChild(img); 
} 
}} 
}catch(e){ 
//ignore 
} 
} 
else if (!pass) {alert("不允许上传文件类型为:"+fileType);document.getElementById(file.name+'Td').innerHTML = mHTML;} 
else if (!match) {alert("只允许上传文件类型为:"+allowType);document.getElementById(file.name+'Td').innerHTML = mHTML;} 
} 
}

调用方法的代码:
<td width="23%" class="inputTd" id="fileNameTd" colspan="3"> 
<input type="file" name="fileName" class="input100" id="fileName" Tip="无法上传空文件" Usage="notempty" contentEditable="false" tmt:required="true" focusTips="请输入文件名" onChange="getFileInfo(this,10,'','vo.fileName','fileNameTd2','vo.fileType','fileTypeDiv','vo.fileSize','fileSizeDiv')"> 
<input type="hidden" name="vo.fileName" id="vo.fileName"> 
<span id="fileNameDiv" name="fileNameDiv"></span> 
</td>

需要显示当前上传图片的需要加入以下代码:

<div id="imgView"> </div>

简单说明下脚本的相关约定:

1:如必须使用<td>对象来(或者别的有innerHTML属性的对象来包含着input的type="file"的对象,并且名称必须是input的name属性+"Td"为后缀)
2:imgView写死了,由于不想再加入更多的参数,因此,这里就固定这个了。大家也可以把名称作参数传递进去。看各位的方便了。
3:所有参数都可以为''但第一个参数基本上是this。脚本会自动去判断相关的参数的。

Javascript 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
javascript smipleChart 简单图标类
Jan 12 #Javascript
javascript Window及document对象详细整理
Jan 12 #Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 #Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 #Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 #Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 #Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 #Javascript
You might like
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python创建关联数组(字典)的方法
2015/05/04 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python读写docx文件的方法
2018/05/08 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
表决心的诗句大全
2014/03/11 职场文书
植树节口号
2014/06/21 职场文书
六一亲子活动总结
2014/07/01 职场文书
小学生优秀评语
2014/12/29 职场文书
兵马俑导游词
2015/02/02 职场文书
python垃圾回收机制原理分析
2022/04/13 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技