多附件上传

最近做的一个项目用到了多附件上传，由于时间有限，在多方参考了网上的资料后只写了一个实现，下一步有时间的话做成一个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" onclick="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" >