asp.net dynamically add multiple attachments to upload.

asp.net dynamically add multiple attachments to upload. Recently asked about dynamic multiple file upload, want to do similar to the effect of mailbox add attachment, this function is actually relatively simple, is to add a file element to the form. After the user selects the file, add another file control, because the file control is too large and visually unattractive, so hide the previous control, keep only one control on the page, and add the file name to the list of attachments.

Note: The original file control on the page must have a runat= "server" flag. That is, there must be at least one runat= "server" file control on this page, otherwise the background will not receive request.files. < FORM ID = "Form1" runat = "server" >
< DIV ID = "DIV1" >
< INPUT ID = "File1" TYPE = "file" NAME = "File1" runat = "server" >
< INPUT TYPE = "button" VALUE = "Add attachment" onclick = "javascript:addfile ();" >
< INPUT TYPE = "button" VALUE = "Delete Attachment" onclick = "javascript:removefile ();" >
< Asp:listbox ID = "ListBox1" Width = "200px" Height = "100px" runat = "server" ></asp:listbox >
< Asp:button ID = "Button1" runat = "server" Text = "save" 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 ("Please select File!");
return;
}

var ary = File.value.split ("/");
var filename = ary[ary.length-1];

var baddfile = true;
if (Checkoptionsexists (Filename,document.getelementbyid ("ListBox1"))
{

Alert ("File already exists in list!");
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 ("Please select the attachment to delete!");
return;
}

var id = lst.value;
Div1.removechild (Document.all[id]);
Lst.removechild (Lst.options[lst.selectedindex]);
Div1.firstChild.style.display = "";

}

Check to see if the option exists.
function Checkoptionsexists (VALUE,DDL)
{
for (var i = 0; I < Ddl.options.length;i + +)
{
if (Ddl.options[i].innertext = = value)
{
return true;
}
}
return false;
}



-->
</SCRIPT >

The background code is relatively simple. Not too much processing, just a simple save.

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 = "Save success!";
}

}