一个简单的自定义多附件上传控件

   在网上提供的都是生成多个上传控件的代码，但大家可以看看21cn,163那里的多附件上传是不是比那些只是生成多个上传控件的界面美观很多呢？？
     现在就开始做一个类似21CN那样的上传的。先看看我做的控件界面吧

好了，现在就写代码了，其实这控件也是利用HTML中FILE控件制作是，只是用CSS和JS做了一些操作，以前我试过用一个onclick的事件来触发FILE的打开文件事件，结果是失败是，因为这可能是关于安全问题，只有FILE自己的打开事件才可以真正获得上传文件。

不说这么多了！！先给出代码吧

1.先制作一个上传文件现显的区域，上传控件会在DIV区域中生成，有利于以后的控制。

<table>
        <tr>
            <td valign="middle" >
       <div id="fileUpArea" class="fileUpArea" >
</div>
                <span style="color: #ff0033">
                上传附件时请先设置文件名称（以便下载时识别）</span></td>
            <td id="filetxt" valign="bottom"></td>
        </tr>
</table>

2.定义CSS

这主要是用来隐藏FILE控件，上传控件区域用图片显示。 大家可以试一下不要这一个CSS你就要吧看到FILE控件了。

 <style type="text/css">
form{ margin:0; padding:0;}
.fileUpArea{ width:80px; height:20px; background:url("addfile.png") no-repeat left top; overflow:hidden;}
.fileHover{ width:80px; height:20px; background:url("btn_dla.gif") no-repeat left top; overflow:hidden;}
#fileUpArea input{ width:1%;height:30px;size:0%; margin-left:0px; z-index:100;filter:alpha(opacity=0);}
* html #fileUpArea input{ margin-top:-5px; margin-left:8px;}
*+html #fileUpArea input{ margin-top:-5px; margin-left:8px;}
#filetxt{ font-size:12px; color:#555; padding:10px;}
#filetxt img{ cursor:point;}
</style>

3.JS代码实现动态生成FILE

以下是我调试时生成的代码，没有写上方法的说明，在源代码中我已经写上了。

   <script language="javascript" type="text/javascript">
 window.onload=CreateFile;
 var inputCount=1;
 function CreateFile() 
 { 
 var container=document.getElementById("fileUpArea");
 container.onmouseover=function(event) 
 {    this.className="fileHover";
 } 
 container.onmouseout=function(event) 
 {    this.className="fileUpArea";
 } 
 var input=document.createElement("input");
 input.type="file";
 input.size="1";
 input.name="file_"+inputCount;
 input.id="multi_file_"+inputCount;
 input.onchange=function(event) 
 {   
 if(CheckFileName(this.value)&&CheckFileNum(5)&&checktype(this.value) )  
 {  
  var textName=this.value;
  textName=textName.substring(textName.lastIndexOf("\\")+1);
  this.style.display="none";
   CreateFile();
  var tempid=this.id+"text";
  var temptext=textName+"<img src='../Images/delete.png' style=\"cursor:hand;\" onclick=\"Del('"+tempid+"'),Del('"+this.id+"')\"/> &nbsp; &nbsp; &nbsp; &nbsp;";
 CreateText(tempid,temptext);
 } 
 } 
container.appendChild(input);
 inputCount++;
 } 
 function CheckFileName(txt) 
 {    
 var container=document.getElementById("fileUpArea");
   var ch=container.getElementsByTagName("input");
   var rvalue=true;
  if(ch.length>=2) 
  {    
  for(i=0;i<ch.length-1;i++)   
  {      
  if(ch[i].value==txt)     
  {        
  alert("你已经添加了相同的附件!!!");
       rvalue= false;
      break;
 } 
 }
  }
   return rvalue;
 } 
 function CheckFileNum(max)
 {   var container=document.getElementById("fileUpArea");
  var ch=container.getElementsByTagName("input");
 if(ch.length-1>=max){ alert("附件最多为"+max+"个！");
 return false;
 } 
 return true;
} 
function CreateText(id,text) 
{  
 var contxt=document.createElement("span");
  contxt.id=id;
  contxt.innerHTML=text;
  document.getElementById("filetxt").appendChild(contxt);
 } 
 function Del(id) 
 { 
 document.getElementById(id).parentNode.removeChild(document.getElementById(id));
 }
 function checktype(s) 
{ 
var patrn=/^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF)$/; 
if (!patrn.exec(s))
{
alert("你上传的类型错误");
 return false 
}
return true 
} 

 </script>

好了，这一步就可以制作出上传控件了，但是有多好属性是可以设置的，那我就把他做为一个简单自定义控件，因为比较简单，所以代码不多说了，我还是上传源代码吧

使用控件时请先在页面的FORM中加入enctype="multipart/form-data"这样才可以保存到上传的文件客户端的路径

而上传代码就是平时大家都会使用的 

HttpFileCollection file = Request.Files;
            int a = file.Count;
            if (a > 1)
            {
for (int i = 0; i < file.Count; i++)
        {
            HttpPostedFile UserHPF = file[i];
string strPicPath = HttpContext.Current.Server.MapPath("adminUpfile") ;
UserHPF.SaveAs(strPicPath);
｝
｝

上传控件源码下载  这里面有好多不好的地方，请有心人帮手指出，多多指教.