本节摘要：上节解决了上传文件到本机指定目录，本节主要是在上节的基础上对前台显示的html页面做一下修改，实现动态的增加文件输入框s。
新建 upload2.html （放在和upload.html文件的同一个目录下）
代码如下：
upload2.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：
