欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-09 23:13:27
下面是我写的一个通用的javascrip脚本,虽然调用时需要赋的参数比较多,但都是实际需要中真正需要使用到的。各位可以参考,并改成自己需要的脚本。 复制代码 代码如下: /*****获取文件信息 ed...
下面是我写的一个通用的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">&nbsp;</div>

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

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