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

 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>

其中肯定有不合理或错误的地方。请各位达人指正。

转载于:https://www.cnblogs.com/McJeremy/archive/2008/05/22/1205007.html