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

下面是我写的一个通用的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。脚本会自动去判断相关的参数的。

(0)

相关推荐

  • Java中获取文件大小的详解及实例代码

     Java 获取文件大小 今天写代码时需要实现获取文件大小的功能,目前有两种实现方法,一种是使用File的length()方法:另外一种是使用FileInputStream的available()方法,当InputStream未进行read操作时,available()的大小应该是等于文件大小的.但是在处理大文件时,后者会发生问题.我们来看一下: 在例子中,我使用了CentOS 6.5 的安装镜像文件,主要是考虑到这个文件足够大(大于2GB). 1.使用File的length()方法 publi

  • Java程序生成exe可执行文件详细教程(图文说明)

    Java程序打包成exe可执行文件,分为两大步骤. 第一步:将Java程序通过Eclipse或者Myeclipse导成Jar包 第二步:通过exe4j讲Jar包程序生成exe可执行文件 第一步详解: 将java程序生成Jar包 以下是Myeclipse导出Jar包,首先选择项目"右击" 点击"Export" 选择JAR file 只保留项目底下的src目录勾选,config和lib为配置文件及程序所需的Jar包 点击"next" 选择Main方法

  • java写入文件的几种方法分享

    一,FileWritter写入文件 FileWritter, 字符流写入字符到文件.默认情况下,它会使用新的内容取代所有现有的内容,然而,当指定一个true (布尔)值作为FileWritter构造函数的第二个参数,它会保留现有的内容,并追加新内容在文件的末尾. 1. 替换所有现有的内容与新的内容. new FileWriter(file);2. 保留现有的内容和附加在该文件的末尾的新内容. 复制代码 代码如下: new FileWriter(file,true); 追加文件示例 一个文本文件,

  • 通过Java来测试JSON和Protocol Buffer的传输文件大小

    JSON相信大家都知道是什么东西,如果不知道,那可就真的OUT了,GOOGLE一下去.这里就不介绍啥的了. Protobuffer大家估计就很少听说了,但如果说到是GOOGLE搞的,相信大家都会有兴趣去试一下,毕竟GOOGLE出口,多属精品. Protobuffer是一个类似JSON的一个传输协议,其实也不能说是协议,只是一个数据传输的东西罢了. 那它跟JSON有什么区别呢? 跨语言,这是它的一个优点.它自带了一个编译器,protoc,只需要用它进行编译,可以编译成JAVA.python.C++

  • Java读取Excel文件内容的简单实例

    借助于apathe的poi.jar,由于上传文件不支持.jar所以请下载后将文件改为.jar,在应用程序中添加poi.jar包,并将需要读取的excel文件放入根目录即可 本例使用java来读取excel的内容并展出出结果,代码如下: 复制代码 代码如下: import java.io.BufferedInputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundExceptio

  • Java如何读取XML文件 具体实现

    今天的CSDN常见问题来讲解下在Java中如何读取XML文件的内容. 直接上代码吧,注释写的很清楚了! 复制代码 代码如下: import java.io.*;import javax.xml.parsers.DocumentBuilder;import javax.xml.parsers.DocumentBuilderFactory;import org.w3c.dom.Document;import org.w3c.dom.Element;import org.w3c.dom.Node;im

  • java自定义日志输出文件(log4j日志文件输出多个自定义日志文件)

    log4j输出多个自定义日志文件 如果在实际应用中需要输出独立的日志文件,怎样才能把所需的内容从原有日志中分离,形成单独的日志文件呢? 先看一个常见的log4j.properties文件,它是在控制台和test.log文件中记录日志: 复制代码 代码如下: log4j.rootLogger=DEBUG, stdout, logfile log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layo

  • JavaWeb实现文件上传下载功能实例解析

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,stru

  • java IO流文件的读写具体实例

    引言: 关于java IO流的操作是非常常见的,基本上每个项目都会用到,每次遇到都是去网上找一找就行了,屡试不爽.上次突然一个同事问了我java文件的读取,我一下子就懵了第一反应就是去网上找,虽然也能找到,但自己总感觉不是很踏实,所以今天就抽空看了看java IO流的一些操作,感觉还是很有收获的,顺便总结些资料,方便以后进一步的学习... IO流的分类:1.根据流的数据对象来分:高端流:所有的内存中的流都是高端流,比如:InputStreamReader  低端流:所有的外界设备中的流都是低端流

  • java 读写文件[多种方法]

    java中多种方式读文件 一.多种方式读文件内容. 1.按字节读取文件内容 2.按字符读取文件内容 3.按行读取文件内容 4.随机读取文件内容 */ import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.FileReader; import java.io.IOException; import java.io.InputStream; import j

随机推荐