用javascript+asp.net批量上传相片的经验总结。
需求:
在一个相册时批量上传相片。相片具有相片标题、相片描述等信息。
---
如果单独的批量上传相片,那没有啥可说的。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等其它浏览器的兼容。
----
运行效果图:


---
附上主要的JS代码:
其中肯定有不合理或错误的地方。请各位达人指正。
在一个相册时批量上传相片。相片具有相片标题、相片描述等信息。
---
如果单独的批量上传相片,那没有啥可说的。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等其它浏览器的兼容。
----
运行效果图:


---
附上主要的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>

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

其中肯定有不合理或错误的地方。请各位达人指正。
<h3>
心静似高山流水不动,心清若巫峰雾气不沾。
</h3>
心静似高山流水不动,心清若巫峰雾气不沾。
</h3>
分类:
ASP.NET(C#)
, Javascript(ajax)
标签:
动态 多文件上传
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端