posts - 27, comments - 14, trackbacks - 0

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

<p>

</span>

</div>

</div>

</p>

JS代碼：

function viewnone(e){

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

}

</script>

方式二:這種方式的動態(tài)多文件上傳是實(shí)現(xiàn)了的，很簡單。
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>

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

</TABLE>

JS代碼：

<SCRIPT language="javascript">
2

//---新建上傳
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

//----選擇文件
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

}
29

//---新建一個文件顯示列表
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

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

oTR.appendChild(oTD1);
47

oTR.appendChild(oTD2);
48

oFileList.appendChild(oTR);
49

}
50

//---移除上傳的文件
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

//---創(chuàng)建一個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

</SCRIPT>
74

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

（本文轉(zhuǎn)自http://www.tkk7.com/bnlovebn/archive/2007/01/26/96194.aspx）

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

FeedBack:

# re: 幾種js實(shí)現(xiàn)的動態(tài)多文件上傳

2014-08-25 15:54 | 11

最后一種不能用回復(fù) 更多評論

新用戶注冊刷新評論列表


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




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: insertAdjacentHTML方法示例轉(zhuǎn)JS校驗(yàn) 封裝了Jakarta 文件上傳功能的一個類(轉(zhuǎn)) 幾種js實(shí)現(xiàn)的動態(tài)多文件上傳動態(tài)WEB應(yīng)用中的用戶SESSION管理方案 JDBC之代碼復(fù)用（轉(zhuǎn)）目錄樹程序

2007年7月

日

一

二

三

四

五

六

常用鏈接

留言簿(4)

隨筆分類

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜