本節(jié)摘要：上節(jié)解決了上傳文件到本機(jī)指定目錄，本節(jié)主要是在上節(jié)的基礎(chǔ)上對(duì)前臺(tái)顯示的html頁(yè)面做一下修改，實(shí)現(xiàn)動(dòng)態(tài)的增加文件輸入框s。
新建 upload2.html （放在和upload.html文件的同一個(gè)目錄下）
代碼如下：
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> 個(gè)文件等待上傳
"
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
>
個(gè)文件等待上傳
</
div
>
92
</
td
>
93
</
tr
>
94
</
table
>
95
<
div
id
="upload"
>
96
<
input
name
="upload"
type
="submit"
value
="開(kāi)始上傳"
/>
97
</
div
>
98
</
div
>
99
</
form
>
100
</
body
>
訪問(wèn)的url如下：
http://localhost:8080/UpDown/upload2.html
運(yùn)行截圖1：
?
截圖2：
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
