posts - 27, comments - 14, trackbacks - 0

方式一：事先寫好多個input.在點擊時才顯示。也就是說上傳的最大個數是寫死了的。
HTML代碼：

<p>

</span>

</div>

</div>

</p>

JS代碼：

function viewnone(e){

e.style.display=(e.style.display=="none")?"":"none";

}

</script>

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

JS代碼：

var attachname = "attach";

var i=1;

function addInput(){

if(i>0){

var attach = attachname + i ;

if(createInput(attach))

i=i+1;

}

function deleteInput(){

if(i>1){

i=i-1;

if(!removeInput())

i=i+1;

}

function createInput(nm){

var aElement=document.createElement("input");

aElement.name=nm;

aElement.id=nm;

aElement.type="file";

aElement.size="50";

//aElement.value="thanks";

//aElement.onclick=Function("asdf()");

if(document.getElementById("upload").appendChild(aElement) == null)

return false;

return true;

}

function removeInput(nm){

var aElement = document.getElementById("upload");

if(aElement.removeChild(aElement.lastChild) == null)

return false;

return true;

}

</script>

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

</TABLE>

JS代碼：

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

第三種方式的改進方案提示：
做一個添加附件然后做一個type為file的input框，把此框和span定位重疊起來把file框透明度設置為0 即完全看不到，但是確實存在。這個時候點span的時候就是在點這個file框但是看不到file框子是不是實現了呢？然后再結合你第二種的方式給框編號動態增加就可以實現多文件上傳了。

（本文轉自http://www.aygfsteel.com/bnlovebn/archive/2007/01/26/96194.aspx）

posted on 2007-07-12 17:23 Scott.Pan 閱讀(2771) 評論(1) 編輯收藏所屬分類: 代碼收藏夾

FeedBack:

# re: 幾種js實現的動態多文件上傳

2014-08-25 15:54 | 11

最后一種不能用回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: insertAdjacentHTML方法示例轉JS校驗封裝了Jakarta 文件上傳功能的一個類(轉) 幾種js實現的動態多文件上傳動態WEB應用中的用戶SESSION管理方案 JDBC之代碼復用（轉）目錄樹程序

<

2014年8月

>

日

一

二

三

四

五

六

27

28

29

30

31

1

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

1

2

3

4

5

6

常用鏈接

留言簿(4)

隨筆分類

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜