最近有人问起动态多文件上传,想要做到类似于邮箱添加附件的效果,这个功能其实比较简单,就是往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 >
< 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 >
<!--
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 = " 保存成功! " ;
}
}
{
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 = " 保存成功! " ;
}
}