在一个相册时批量上传相片。相片具有相片标题、相片描述等信息。
---
如果单独的批量上传相片,那没有啥可说的。NET的上传功能可说绰绰有余。只要记得
<form enctype="multipart/form-data" .......就可以了。
---
第一个: 需要考虑的是每张照片对应它自己的标题和描述。。。考虑了一下,我最后采用,在动态添加上传表单时
给予相应的文本框加name="title1" name="title2"这样的形式来一一对应。
第二个: 需要考虑的是如何通过JS动态添加。。
根据以前在网上看过的多文件上传的实现,真实我用 ***.innerHTML=****的形式来为某个容器动态添加项实现。
不过,发现如果某些上传表单已经有选过文件,此时再用innerHTML+=****的形式的话, 原来已选的内容会被重置。
最后决定用 ***.insertAdjacentHTML(position,nhtml)的形式来实现。需要注意的是在FF下并不支持这个函数。具体的兼容方案在代码中。
第三个: FF不支持removeNode(true|false)的解决办法:使用***.parentNode.removeChild(***)的形式来兼容。
--------
总结:单纯的文件上传功能应该很简单,动态添加要注意的就是IE与FF等其它浏览器的兼容。
----
运行效果图:
![111.jpg](/images/cnblogs_com/mcjeremy/111.jpg)
![222.jpg](/images/cnblogs_com/mcjeremy/222.jpg)
---
附上主要的JS代码:
1
<script type="text/javascript" language="javascript">
2
<!--
3
//多相片上传动态增加
4
var num=0;
5
if(!document.all) //非IE类下注册
6
{
7
HTMLElement.prototype.insertAdjacentHTML=function(where, html)
8
{
9
var e=this.ownerDocument.createRange();
10
e.setStartBefore(this);
11
e=e.createContextualFragment(html);
12
switch (where)
13
{
14
case 'beforeBegin': this.parentNode.insertBefore(e, this);break;
15
case 'afterBegin': this.insertBefore(e, this.firstChild); break;
16
case 'beforeEnd': this.appendChild(e); break;
17
case 'afterEnd':
18
if(!this.nextSibling) this.parentNode.appendChild(e);
19
else this.parentNode.insertBefore(e, this.nextSibling); break;
20
}
21
};
22
}
23
function AddNew()
24
{
25
num++;
26
if(num>=2)
27
{
28
var parObj=document.getElementById("upfiles"+(num-1));
29
var reBtn=document.getElementById("remove"+(num-1));
30
if(document.all)
31
{
32
reBtn.removeNode(true);
33
}
34
else
35
{
36
reBtn.parentNode.removeChild(reBtn)
37
}
38
}
39
var nhtml="<div id=\"upfiles"+num+"\" ><br /><fieldset><legend id=\"add"+num+"\" name=\"add"+num+"\" title=\"上传框\">上传相片<input type=\"button\" id=\"remove"+num+"\" name=\"remove"+num+"\" onclick=\"Remove("+num+")\" value=\"取消该上传\" /></legend>";
40
nhtml+="照片标题:<input type=\"text\" id=\"PhotoTitle"+num+"\" name=\"PhotoTitle"+num+"\"/><span class=\"fon1\">*</span><br />";
41
nhtml+="照片描述:<textarea id=\"PhotoText"+num+"\" name=\"PhotoText"+num+"\" rows=\"6\" cols=\"50\" ></textarea><br />";
42
nhtml+="图片文件:<input type=\"file\" id=\"PhotoFile\" name=\"PhotoFile\" /><span class=\"fon1\">*</span></fieldset><br /></div>";
43
document.getElementById("FileTable").insertAdjacentHTML("beforeEnd",nhtml);
44
}
45
function Remove(currentnum)
46
{
47
var parObj=document.getElementById("FileTable");
48
var current=document.getElementById("upfiles"+parseInt(currentnum));
49
parObj.removeChild(current);
50
num--;
51
if(num>=1)
52
{
53
var leg=document.getElementById("add"+(num));
54
var btnHtml="<input type=\"button\" id=\"remove"+num+"\" name=\"remove"+num+"\" onclick=\"Remove("+(num)+")\" value=\"取消该上传\" />"
55
leg.insertAdjacentHTML("beforeEnd",btnHtml);
56
}
57
}
58
//end
59
//-->
60
</script>
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
21
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
22
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
23
![](/Images/OutliningIndicators/None.gif)
24
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
38
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
45
![](/Images/OutliningIndicators/None.gif)
46
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
57
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
58
![](/Images/OutliningIndicators/None.gif)
59
![](/Images/OutliningIndicators/None.gif)
60
![](/Images/OutliningIndicators/None.gif)
其中肯定有不合理或错误的地方。请各位达人指正。