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代码：

<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

//---创建一个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

第三种方式的改进方案提示：
做一个添加附件然后做一个type为file的input框，把此框和span定位重叠起来把file框透明度设置为0 即完全看不到，但是确实存在。这个时候点span的时候就是在点这个file框但是看不到file框子是不是实现了呢？然后再结合你第二种的方式给框编号动态增加就可以实现多文件上传了。

（本文转自http://www.blogjava.net/bnlovebn/archive/2007/01/26/96194.aspx）

posted on 2007-07-12 17:23 Scott.Pan 阅读(2761) 评论(1) 编辑收藏所属分类: 代码收藏夹

FeedBack:

# re: 几种js实现的动态多文件上传

2014-08-25 15:54 | 11

最后一种不能用回复更多评论

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: insertAdjacentHTML方法示例转JS校验封装了Jakarta 文件上传功能的一个类(转) 几种js实现的动态多文件上传动态WEB应用中的用户SESSION管理方案 JDBC之代码复用（转）目录树程序

2007年7月

日

一

二

三

四

五

六

常用链接

留言簿(4)

随笔分类

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜