最近做的一个项目用到了多附件上传,由于时间有限,在多方参考了网上的资料后只写了一个实现,下一步有时间的话做成一个UC
言归正传:
思路是这样的:在页面上放置一个table,每点一次添加附件都会在table里添加一行记录(一个file控件,一个移除按钮)。同样,如果要移除会删除table里的一行记录。最后将多附件统一进行上传操作
<
a href
=
"
javascript:addFile();
"
>
新增附件
</
a
>
< table >
< tbody id = " tb1 " >
</ tbody >
</ table >
< 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);
}
}
}
... {
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);
}
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
"
>