asp.net 动态添加多附件上传.

 asp.net 动态添加多附件上传.

最近有人问起动态多文件上传，想要做到类似于邮箱添加附件的效果，这个功能其实比较简单，就是往form中添加file元素。在用户选择完文件后，再添加一个file控件，由于file控件过多，视觉上不好看，所以隐藏之前的控件，保持页面上只有一个控件，同时把文件名添加到附件列表中。

 注意：页面上初始的file控件必须有runat="server"标志。也就是说，这个页面上必须至少有一个runat="server"的file控件，否则后台接收不到Request.Files。

< FORM  id ="form1"  runat ="server" >
             < DIV  id ="div1" >
                 < INPUT  ID ="File1"  TYPE ="file"  NAME ="File1"  runat ="server" >
                 < INPUT  TYPE ="button"  VALUE ="添加附件"  onclick ="javascript:AddFile();" >
                 < INPUT  TYPE ="button"  VALUE ="删除附件"  onclick ="javascript:RemoveFile();" >
                 < ASP:LISTBOX  id ="ListBox1"  Width ="200px"  Height ="100px"  runat ="server" ></ ASP:LISTBOX >
                 < ASP:BUTTON  id ="Button1"  runat ="server"  Text ="保存"  Width ="60px" ></ ASP:BUTTON >
             </ DIV >
             < ASP:LITERAL  ID ="lResult"  Runat ="server" ></ ASP:LITERAL >
             
         </ FORM >

 

< SCRIPT language = " javascript " >
<!--
  function  AddFile()
 {    
  
     var  file  =  document.getElementById( " div1 " ).firstChild;
     if (file.value  ==   "" )
    {
        alert( " 请选择文件! " );
         return ;
    }
    
     var  ary  =  file.value.split( " / " );
     var  filename  =  ary[ary.length - 1 ];
    
     var  bAddFile  =   true ;
     if (CheckOptionsExists(filename,document.getElementById( " ListBox1 " )))
    {
        
        alert( " 文件已经存在列表中! " );
        div1.removeChild(file);
        bAddFile  =   false ;
        
    }
    
    
     var  f  =  document.createElement( " input " );
    f.type  =   " file " ;
    f.name  =   " file "
    
    div1.insertBefore(f,div1.firstChild);
    
     if ( ! bAddFile)
    {
         return
    }
     var  o  =   new  Option();
    o.innerText  =  filename;
    o.value  =  file.uniqueID;
    document.getElementById( " ListBox1 " ).appendChild(o);
    
    file.style.display  =   " none " ;
    
     
    
 }
 
  function  RemoveFile()
 {
     var  lst  =  document.getElementById( " ListBox1 " );
     if (lst.selectedIndex  ==   - 1 )
    {
        alert( " 请选择要删除的附件! " );
         return ;
    }
    
     var  id  =  lst.value;
    div1.removeChild(document.all[id]);
    lst.removeChild(lst.options[lst.selectedIndex]);
    div1.firstChild.style.display  =   "" ;
     
 }
 
  // 检查选项是否存在.
  function  CheckOptionsExists(value,ddl)
 {
     for ( var  i = 0 ;i < ddl.options.length;i ++ )
    {
         if (ddl.options[i].innerText  ==  value)
        {
             return   true ;
        }
    }
     return   false ;
 }
 
 
 
// -->
         </ SCRIPT >

 

 

后台代码就比较简单了。没有过多的处理，只是一个简单的保存。

 

private   void  Button1_Click( object  sender, System.EventArgs e)
        {
             
             for ( int  i = 0 ;i < Request.Files.Count;i ++ )
            {
                 if (Request.Files[i].ContentLength  > 0 )
                {
                     string  filename  =  System.IO.Path.GetFileName(Request.Files[i].FileName);
                    Request.Files[i].SaveAs(Server.MapPath(filename));
                     this .ListBox1.Items.Add( new  ListItem(filename,filename));
                }

                 this .lResult.Text  =   " 保存成功! " ;
            }
            
        }