您的位置：首页 > 其它

文件上传简介1---上传到指定的目录3

2012-02-21 23:42 288 查看

本节摘要：前面介绍了文件上传到目录，本节是对uoload.html前面前台做了一定的修改，加了一些校验在前台。

修改后的upload.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"  onblur="verify(id)"><!-- onblur="" -->
</td>
</tr>
<tr>
<td width="100%" colspan="2">
文件2：
<input id="bFile" name="b" size="40" type="file" onblur="verify(id)">
</td>
</tr>
<tr>
<td width="100%" colspan="2">
文件3：
<input id="cFile" name="c" size="40" type="file" onblur="verify(id)">
</td>
</tr>

</table>

<table>
<tr>
<td align="center">
<!--
<input name="upload" type="submit" value="开始上传" />
-->
<input name="upload" type="button" value="开始上传" onclick="upFile()" />
</td>
</tr>
</table>

</form>
</body>
</html>

效果截图：

图1:

截图2：

截图3：

对于我来说，今天主要是知道了以下几点：

1.button按钮加上js控制也可以替代submit按钮提交表单到指定的servlet

2.可以通过name属性获得指定表单的值，如: var a=this.uploadform.a.value; 以前自己真没有这样用过

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航