HTML代碼:

















方式二:這種方式的動態多文件上傳是實現了的,很簡單。
HTML代碼:
























































方式三:動態多文件上傳,只是在oFileInput.click();這個地方,這樣做就不能上傳這個文件了,因為發現它在上傳之時就把這個input中的文件置空了。很可能是為了安全著想吧!
另外還有一點就是說,click()只有在ie中才能正常運行。
雖說這種方式最終沒能實現上傳,但還是留下來參考,看看是否有人可以真正實現上傳。
HTML代碼:





1
<SCRIPT language="javascript">
2
3
//---新建上傳
4
function newUpload()
{
5
var oFileList = document.getElementById("fileList");
6
var fileCount = oFileList.childNodes.length + 1;
7
var oFileInput = newFileInput("upfile_" + fileCount);
8
if(selectFile(oFileInput))
{
9
addFile(oFileInput);
10
}
11
}
12
13
14
//----選擇文件
15
function selectFile(oFileInput)
{
16
var oUploadFiles = document.getElementById("uploadFiles");
17
oUploadFiles.appendChild(oFileInput);
18
oFileInput.focus();
19
oFileInput.click();//不能這樣做,可能是為了安全著想吧!
20
var fileValue = oFileInput.value;
21
if(fileValue == "")
{
22
oUploadFiles.removeChild(oFileInput);
23
return false;
24
}
25
else
26
return true;
27
28
}
29
30
//---新建一個文件顯示列表
31
function addFile(oFileInput)
{
32
var oFileList = document.getElementById("fileList");
33
var fileIndex = oFileList.childNodes.length + 1;
34
var oTR = document.createElement("TR");
35
var oTD1 = document.createElement("TD");
36
var oTD2 = document.createElement("TD");
37
38
oTR.setAttribute("id","file_" + fileIndex);
39
oTR.setAttribute("bgcolor","#FFFFFF");
40
oTD1.setAttribute("width","6%");
41
oTD2.setAttribute("width","94%");
42
oTD2.setAttribute("align","left");
43
oTD2.innerText = oFileInput.value;
44
oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ');">刪除</A>';
45
46
oTR.appendChild(oTD1);
47
oTR.appendChild(oTD2);
48
oFileList.appendChild(oTR);
49
}
50
51
//---移除上傳的文件
52
function removeFile(fileIndex)
{
53
var oFileInput = document.getElementById("upfile_" + fileIndex);
54
var oTR = document.getElementById("file_" + fileIndex);
55
uploadFiles.removeChild(oFileInput);
56
fileList.removeChild(oTR);
57
}
58
59
//---創建一個file input對象并返回
60
function newFileInput(_name)
{
61
var oFileInput = document.createElement("INPUT");
62
oFileInput.type = "file";
63
oFileInput.id = _name;
64
oFileInput.name = _name;
65
oFileInput.size="50";
66
//oFileInput.setAttribute("id",_name);
67
//oFileInput.setAttribute("name",_name);
68
//oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>';
69
//alert(oFileInput.outerHTML);
70
return oFileInput;
71
}
72
73
</SCRIPT>
74
第三種方式的改進方案提示:
2

3

4



5

6

7

8



9

10

11

12

13

14

15



16

17

18

19

20

21



22

23

24

25

26

27

28

29

30

31



32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52



53

54

55

56

57

58

59

60



61

62

63

64

65

66

67

68

69

70

71

72

73

74

做一個 添加附件 然后做一個type為file的input框,把此框和span定位重疊起來 把file框透明度設置為0 即完全看不到,但是確實存在。這個時候點span的時候就是在點這個file框 但是看不到file框子 是不是實現了呢? 然后再結合你第二種的方式給框編號 動態增加就可以實現多文件上傳了 。
(本文轉自http://www.aygfsteel.com/bnlovebn/archive/2007/01/26/96194.aspx)