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