本节摘要:前面介绍了文件上传到目录,本节是对uoload.html前面前台做了一定的修改,加了一些校验在前台。
修改后的upload.html文件如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <title>文件上传</title>
5 <meta name="Generator" content="EditPlus">
6 <meta name="Author" content="">
7 <meta name="Keywords" content="">
8 <meta name="Description" content="">
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10
11 <script>
12 //文件提交之前一个简单的js校验
13 function upFile(){
14 //获得File的值
15 var a=this.uploadform.a.value;
16 var b=this.uploadform.b.value;
17 var c=this.uploadform.c.value;
18
19 //三个文件表单同时为空的时候提示
20 if(a==""&&b==""&&c=="")
21 {
22 alert("请选择文件");
23 return;
24 }
25
26 //验证完成后跳转到指定的servlet处理
27 this.uploadform.action="upload";//不能有左斜杠/ 用此种方式访问后跳转的url为:http://localhost:8080/UpDown/upload OK
28 //错误的方式---> this.uploadform.action="/upload"; 用此种方式访问后跳转的url为:http://localhost:8080/upload NG
29
30 this.uploadform.submit();
31 }
32
33 //得到文件的后缀名
34 function expType(obj){
35 var re=/(\\+)/g;
36 var error=obj.replace(re,"#").split("#");
37 var fileName=error[error.length-1]; //如test.txt
38 var expData=fileName.split(".");
39 var expType=expData[expData.length-1];//得到文件a的后缀名txt
40 return expType;
41 }
42
43 //动态校验上传文件的后缀名
44 function verify(id){
45 var fileValue=document.getElementById(id).value;
46 var expName=expType(fileValue);
47 var errorType =new Array(".exe", ".com", ".cgi", ".asp");//这些后缀名的文件不能上传
48 for(i in errorType)
49 {
50 if(errorType[i]==("."+expName)){
51 alert(errorType[i]+"格式的文件不能上传");
52 return;
53 }
54 }
55 }
56 </script>
57
58 </head>
59
60 <body>
61 <strong>文件上传演示demo---上传到本机文件夹中(程序和上传目录在同一主机)</strong>
62 <!--
63 1.上传的内容有图片的时候,form中必须加入 ENCTYPE="multipart/form-data"
64 2.在<input>标签中必须有name属性(除了提交按钮submit),否则运行时虽然不会报错,但是文件无法成功上传
65 -->
66 <form name="uploadform" method="POST" action="upload"
67 ENCTYPE="multipart/form-data">
68 <table border="1" width="450" cellpadding="4" cellspacing="2"
69 bordercolor="#9BD7FF">
70 <tr>
71 <td width="100%" colspan="2">
72 文件1:
73 <input id="aFile" name="a" size="40" type="file" onblur="verify(id)"><!-- οnblur="" -->
74 </td>
75 </tr>
76 <tr>
77 <td width="100%" colspan="2">
78 文件2:
79 <input id="bFile" name="b" size="40" type="file" onblur="verify(id)">
80 </td>
81 </tr>
82 <tr>
83 <td width="100%" colspan="2">
84 文件3:
85 <input id="cFile" name="c" size="40" type="file" onblur="verify(id)">
86 </td>
87 </tr>
88
89 </table>
90
91 <table>
92 <tr>
93 <td align="center">
94 <!--
95 <input name="upload" type="submit" value="开始上传" />
96 -->
97 <input name="upload" type="button" value="开始上传" onclick="upFile()" />
98 </td>
99 </tr>
100 </table>
101
102 </form>
103 </body>
104 </html>
效果截图:
图1:
截图2:
截图3:
对于我来说,今天主要是知道了以下几点:
1.button按钮加上js控制也可以替代submit按钮提交表单到指定的servlet
2.可以通过name属性获得指定表单的值,如: var a=this.uploadform.a.value; 以前自己真没有这样用过