本节摘要:前面介绍了文件上传到目录,本节是对uoload.html前面前台做了一定的修改,加了一些校验在前台。
修改后的upload.html文件如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文件上传</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
//文件提交之前一个简单的js校验
function upFile(){
//获得File的值
var a=this.uploadform.a.value;
var b=this.uploadform.b.value;
var c=this.uploadform.c.value;
//三个文件表单同时为空的时候提示
if(a==""&&b==""&&c=="")
{
alert("请选择文件");
return;
}
//验证完成后跳转到指定的servlet处理
this.uploadform.action="upload";//不能有左斜杠/ 用此种方式访问后跳转的url为:http://localhost:8080/UpDown/upload OK
//错误的方式---> this.uploadform.action="/upload"; 用此种方式访问后跳转的url为:http://localhost:8080/upload NG
this.uploadform.submit();
}
//得到文件的后缀名
function expType(obj){
var re=/(\\+)/g;
var error=obj.replace(re,"#").split("#");
var fileName=error[error.length-1]; //如test.txt
var expData=fileName.split(".");
var expType=expData[expData.length-1];//得到文件a的后缀名txt
return expType;
}
//动态校验上传文件的后缀名
function verify(id){
var fileValue=document.getElementById(id).value;
var expName=expType(fileValue);
var errorType =new Array(".exe", ".com", ".cgi", ".asp");//这些后缀名的文件不能上传
for(i in errorType)
{
if(errorType[i]==("."+expName)){
alert(errorType[i]+"格式的文件不能上传");
return;
}
}
}
</script>
</head>
<body>
<strong>文件上传演示demo---上传到本机文件夹中(程序和上传目录在同一主机)</strong>
<!--
1.上传的内容有图片的时候,form中必须加入 ENCTYPE="multipart/form-data"
2.在<input>标签中必须有name属性(除了提交按钮submit),否则运行时虽然不会报错,但是文件无法成功上传
-->
<form name="uploadform" method="POST" action="upload"
ENCTYPE="multipart/form-data">
<table border="1" width="450" cellpadding="4" cellspacing="2"
bordercolor="#9BD7FF">
<tr>
<td width="100%" colspan="2">
文件1:
<input id="aFile" name="a" size="40" type="file" οnblur="verify(id)"><!-- οnblur="" -->
</td>
</tr>
<tr>
<td width="100%" colspan="2">
文件2:
<input id="bFile" name="b" size="40" type="file" οnblur="verify(id)">
</td>
</tr>
<tr>
<td width="100%" colspan="2">
文件3:
<input id="cFile" name="c" size="40" type="file" οnblur="verify(id)">
</td>
</tr>
</table>
<table>
<tr>
<td align="center">
<!--
<input name="upload" type="submit" value="开始上传" />
-->
<input name="upload" type="button" value="开始上传" οnclick="upFile()" />
</td>
</tr>
</table>
</form>
</body>
</html>
效果截图:
图1:
截图2:
截图3:
对于我来说,今天主要是知道了以下几点:
1.button按钮加上js控制也可以替代submit按钮提交表单到指定的servlet
2.可以通过name属性获得指定表单的值,如: var a=this.uploadform.a.value; 以前自己真没有这样用过