本节摘要：上节解决了上传文件到本机指定目录，本节主要是在上节的基础上对前台显示的html页面做一下修改，实现动态的增加文件输入框s。
新建upload2.html（放在和upload.html文件的同一个目录下）
代码如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>upload2.html</title>
5
6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7 <meta http-equiv="description" content="this is my page">
8 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
11
12 <script>
13 function mCreateFile(obj){
14 var eF
15 var mName
16 mFileName.innerHTML=""
17 if (obj.id=="File") {
18
19 mstatus.innerHTML="总共有 <b>"+(mFile.children.length-1)+"</b> 个文件等待上传"
20
21 for (i=0;i<mFile.children.length-1;i++)
22 {
23 if (mFile.children.value=="") {
24 mFile.removeChild(mFile.children)
25 }
26 else
27 {
28 mName=mFile.children.value.split("\\")
29 mFileName.innerHTML+="<div id=NameDetail title='"+mName[mName.length-1]+"'>"+mName[mName.length-1]+"</div>"
30 }
31 }
32
33 }
34
35 if (obj.id=="File_New") {
36 eF=document.createElement('<input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)">')
37 mFile.appendChild(eF)
38 obj.id="File"
39 }
40 }
41 </script>
42 <style>
43 table{
44 FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3);
45 }
46 input{
47 border:1px soild #000000;
48 font-family:Verdana,Arial,宋体;
49 font-size:12px;
50 padding:2px;
51 }
52 #mTD{
53 LINE-HEIGHT: 24px;
54 }
55 #mFile{
56 width:203px;
57 float:left;
58 |
59 #mFileName{
60 float:right;
61 width:182px;
62 }
63 #NameDetail{
64 overflow:hidden;
65 width:176px;
66 color:#000000;
67 font-family:Verdana,Arial,宋体;
68 font-size:12px;
69 cursor:default;
70 height:22px;
71 }
72 #mstatus{
73 font-size:12px;
74 color:#ff0000;
75 }
76 </style>
77 </head>
78
79 <body>
80 <form name="uploadform" method="POST" action="upload"
81 ENCTYPE="multipart/form-data">
82 <div align="center">
83 <table border="1" width="420" style="border-collapse: collapse" bordercolor="#0066cc" cellpadding="4" bgcolor="#D0F0FF">
84 <tr>
85 <td bgcolor="#3399FF" height="26" align="center"><font color="#FFFFFF" size="3"><b>添加附件</b></font></td>
86 </tr>
87 <tr>
88 <td id=mTD>
89 <div id=mFile><input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)"></div>
90 <div id=mFileName></div>
91 <div id=mstatus>总共有 <b>0</b> 个文件等待上传</div>
92 </td>
93 </tr>
94 </table>
95 <div id="upload">
96 <input name="upload" type="submit" value="开始上传" />
97 </div>
98 </div>
99 </form>
100 </body>
访问的url如下：
http://localhost:8080/UpDown/upload2.html
运行截图1：
截图2：