Javascript dynamic generation of graphic upload control implementation code

When uploading files, you sometimes need to upload multiple images. here we need to dynamically generate the control for uploading images based on the user's actual situation. js is fully available here.

STEP/Method

① Change the Form label in the aspx page

The Code is as follows:	Copy code
: <Form id = "form1" runat = "server" enctype = "multipart/form-data">,

That is to say, the original added enctype = "multipart/form-data"
② Add the following code to the page, which contains a div container to facilitate the dynamic addition of controls to the Container Using js

The Code is as follows:	Copy code
<Div align = "left" id = "div_Pic" style = "border: 1px solid # CCCCCC"> <Input name = "PicFile" type = "file" id = "ShowPicFile" onClick = "createInput ('div _ Pic ', 'picfile')"> </Div>

③ Add js Code:

The Code is as follows:

Copy code

<Script language = "javascript" type = "text/ecmascript"> 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; AElement. id = inputFileID; AElement. type = "file"; // set the type to file. AElement. onclick = function () {createInput ("div_Pic", "PicFile ")}; 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 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>

④ Effect display:

 

When you click browse, a new upload control is added. If you do not need it, click Delete next to it.
⑤ Server-side processing code:

The Code is as follows:

Copy code

System. Web. HttpFileCollection files = System. Web. HttpContext. Current. Request. Files; For (int I = 0; I <files. Count; I ++) { System. Web. HttpPostedFile filePicture = files [I]; String FileType; // File Upload type (Extension) FileType = System. IO. Path. GetExtension (filePicture. FileName). ToLower (); String sFileName = Guid. NewGuid (). ToString () + FileType; FilePicture. SaveAs (Server. MapPath ("HotPic \" + sFileName); // Save the image }

You can use System. Web. HttpContext. Current. Request. Files; to obtain a set of all uploaded Files, and then traverse and upload.