Dynamically add n upload controls for batch upload

From: http://blog.csdn.net/mjh11310/article/details/5855700

JS:

<Script language = "JavaScript" type = "text/ecmascript">
// ======================================
// Function: input file control in a form
// Parameter: parentid --- parent element ID of the input file control to be inserted
// Inputid ---- input file Control ID
// ======================================
Function createinput (parentid, inputfileid ){
VaR parent = $ (parentid); // obtain the parent Element

VaR DIV = Document. createelement ("Div"); // create a div container to include the input file
VaR x = parseint (math. Random () * (80-1) + 1;
VaR divname = inputfileid + X. tostring (); // name of the random Div container
Div. Name = divname;
Div. ID = divname;

VaR aelement = Document. createelement ("input"); // create Input

Aelement. Name = inputfileid;
// Specify the name
Aelement. ID = inputfileid;
Aelement. type = "file"; // set the type to file.
Aelement. width = "400 ";

VaR delbtn = Document. createelement ("input"); // create a button to delete the input file.
Delbtn. type = "button ";
Delbtn. value = "delete ";
Delbtn. onclick = function () {removeinput (parentid, divname)}; // set the onclick method for the button

Div. appendchild (aelement); // Add the input file to the DIV container
Div. appendchild (delbtn); // Add the delete button to the DIV container
Parent. appendchild (DIV); // Add the DIV container to the parent Element
}
// ==================================
// Function: delete a div container containing input file
// Parameter: parentid --- parent element ID of the input file control
// Deldivid ---- Div container ID containing input file
// ==================================
Function removeinput (parentid, deldivid ){
VaR parent = $ (parentid );
Parent. removechild ($ (deldivid ));
}
// Obtain the elements in the document using the element ID
Function $ (v) {return document. getelementbyid (V );}

</SCRIPT>

 

HTML:

<Form> Add enctype = "multipart/form-Data"

<Div class = "manageline" onmouseover = "This. classname = 'manageline-Hover '" onmouseout = "This. classname = 'manageline'">
<Div align = "Left" id = "div_pic" style = "border: 1px solid # cccccc">
<Input name = "picfile" type = "file" id = "showpicfile" runat = "server" style = "width: 400px">
// A runat = "server" input file control is required.
<Input type = "button" onclick = "createinput ('div _ PIC ', 'picfile ') "Name =" button "id =" button "value =" + continue adding images ">

</Div>

CS:

 

Httpfilecollection files = httpcontext. Current. Request. files;

// Upload images in batches
For (INT I = 0; I <files. Count; I ++)
{
Httppostedfile mypost = files [I];
If (mypost. contentlength! = 0)
{
Type = mypost. filename. substring (mypost. filename. lastindexof (".") + 1 );
If (type = "jpg" | type = "jpg" | type = "jpge" | type = "jpge" | type = "GIF" | type = "GIF ")
{
// Determine the size of the uploaded file in bytes
Int filelength = mypost. contentlength;
If (filelength & gt; 1024*1024)
{
Response. Write ("the size of the uploaded image must be less than 1 MB! ");
Response. End ();
}
Else
{
String Path = httpcontext. Current. Request. mappath ("~ /ZP/"); // obtain the path of the uploaded file's website directory

Random Rand = new random ();
String strname = datetime. Now. tostring ("yyyymmddhhmm") + Rand. Next (100,999) + "." + type;
Mypost. saveas (path + strname );

}

}
Else
{
Response. Write ("<SCRIPT> alert ('the image format is incorrect! '); </SCRIPT> ");
Response. End ();
}
}
}