多附件上传

最近做的一个项目用到了多附件上传，由于时间有限，在多方参考了网上的资料后只写了一个实现，下一步有时间的话做成一个UC 

言归正传:

思路是这样的：在页面上放置一个table，每点一次添加附件都会在table里添加一行记录（一个file控件，一个移除按钮）。同样，如果要移除会删除table里的一行记录。最后将多附件统一进行上传操作

< a href = " javascript:addFile(); " > 新增附件 </ a >  
< table  >
< tbody id = " tb1 " >
                      
</ tbody >
</ table >

 

后台cs代码：

 

if  (Request.Files.Count  >   0 )
... {
 for (int i = 0; i < Request.Files.Count; i++)
...{
if (Request.Files[i].FileName != "")
...{
HttpPostedFile file = (HttpPostedFile)Request.Files[i];
--文件大小，扩展名判断
//strUrl文件在服务器上的保存路径
 files.SaveAs(strUrl);
}
}
}

 

前台js代码添加和删除

 

var  TotalFiles  =   0 ;
function  addFile()
{
     var  oTBody  =  document.getElementById( " tb1 " );
     // create a new row
     var  oTR1  =  document.createElement( " tr " );
    oTBody.appendChild(oTR1);
    
     var  oTD1  =  document.createElement( " td " );
     var  oDiv1  =  document.createElement( " div " );

     var  file = document.createElement( " input " ); 
    file.type  =   " file " ;
    file.id  =   " f " +  TotalFiles.toString();
    file.name  =   " files " +  TotalFiles.toString(); 
    
    oDiv1.appendChild(file);
    
    oTD1.appendChild(oDiv1);
    oTR1.appendChild(oTD1);
    
     var  oTD2  =  document.createElement( " td " );
     var  oDiv2  =  document.createElement( " div " );
    oDiv2.setAttribute( " align " , " left " );
    oDiv2.innerHTML  =   " <input type="button" οnclick="delFile(this)" "   +   "  value="移除" /> " ;
    oTD2.appendChild(oDiv2);
    oTR1.appendChild(oTD2);
}

function  $(id)
{
     return  document.getElementById(id);    
}

function  delFile(obj)
{
     var  oDiv  =  obj.parentNode;
     var  oTD  =  oDiv.parentNode;
     var  oTR  =  oTD.parentNode;
     var  oTBody  =  document.getElementById( " tb1 " );
    oTBody.removeChild(oTR);
}

 

注：enctype="multipart/form-data",这个属性是必须的，否则file控件不起作用。

< form id = " form1 "  runat = " server "  enctype = " multipart/form-data "   >