We often encounter the need to upload multiple files at a time during Asp.net web development. Generally, our solution is to put multiple Upload File boxes in a fixed manner. This solution is obviously unreasonable, because uploading multiple files at a time means that the quantity is uncertain. Therefore, we need to add these file upload boxes dynamically. The following uses the image upload function in my image library management as an example.
First look at the effect:
Open the initial interface:
By default, an image is uploaded. However, when you click "add image", you can select multiple images and their descriptions to upload at the same time. This function allows you to upload up to eight images at a time, the size of each image cannot exceed 1 MB, which can be changed as needed!
The implementation process is as follows:
Step 1: use JavaScript code to dynamically Add a file upload box and a description text box. The key code is as follows:
<SCRIPT type = "text/JavaScript">
VaR I = 1
Function AddFile ()
...{
If (I <8)
... {Var STR = '<br> <input type = "file" name = "file" runat = "server" style = "width: 300px"/> description: <input name = "text" type = "text" style = "width: 150px" maxlength = "20"/>'
Document. getelementbyid ('myfile'). insertadjacenthtml ("beforeend", STR)
}
Else
...{
Alert ("you can upload up to 8 images at a time! ")
}
I ++
}
</SCRIPT> the HTML call code is:
<P id = "myfile"> <input onclick = "AddFile ()" type = "button" value = "add image"> <br/>
<Input type = "file" name = "file" runat = "server" style = "width: 300px"/>
Description: <input name = "text" type = "text" style = "width: 150px" maxlength = "20"/>
Step 2: server code implementation
It is most common to upload a single file or image. However, it takes a lot of effort to upload multiple files at a time and their corresponding descriptions.
First, use system. web. httpcontext. current. request. obtain the file set of the client using the files method, and then use the request. the form method obtains the set of description text boxes, uploads files in a loop, and saves the corresponding information to the database.
The key code is as follows:
System. Web. httpfilecollection files = system. Web. httpcontext. Current. Request. files;
String [] RD = request. Form [1]. Split (','); // string array of the text box for obtaining the image description, which is the description of the corresponding image
String albumid = ddlalbum. selectedvalue. Trim ();
Int ifile;
For (ifile = 0; ifile <files. Count; ifile ++)
...{
If (files [ifile]. filename. length> 0)
...{
.................. // Upload a single file and save relevant information
}
}
Finally, we provide all the code for the above functions:
HTML code:
<%... @ Page Language = "C #" codefile = "uploadimg. aspx. cs" inherits = "netadmin_apicture_uploadimg" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
<SCRIPT type = "text/JavaScript">...
VaR I = 1
Function AddFile ()
...{
If (I <8)
... {Var STR = '<br> <input type = "file" name = "file" runat = "server" style = "width: 300px"/> description: <input name = "text" type = "text" style = "width: 150px" maxlength = "20"/>'
Document. getelementbyid ('myfile'). insertadjacenthtml ("beforeend", STR)
}
Else
...{
Alert ("you can upload up to 8 images at a time! ")
}
I ++
}
</SCRIPT>
<Link href = "http://www.cnblogs.com/NetAdmin/Site.Css" rel = "stylesheet" type = "text/CSS"/>
</Head>
<Body style = "background-image: URL (../images/bg.jpg); text-align: Center">
<Form ID = "form1" runat = "server">
<Div>
<Table id = "Table1" align = "center" border = "0" cellpadding = "1" cellspacing = "1" class = "table"
Style = "height: 58px" width = "620">
<Tr>
<TD align = "center" background = "../images/topbg1.jpg">
<Font color = "# 0000ff" face = "" size = "3"> <strong> upload images </strong> </font> </TD>
</Tr>
<Tr>
<TD align = "center">
</TD>
</Tr>
<Tr>
<TD align = "center">
<Asp: Panel id = "panel5" runat = "server" width = "608px">
& Lt; table width = "100%" & gt;
<Tr>
<TD align = "right" style = "width: 100px">
</TD>
<TD align = "Left">
Note: you can click the Add image button to upload multiple images at a time. You can enter a description of up to 20 words for each image. The size of a single image cannot exceed 1024 kb </TD>
</Tr>
<Tr>
<TD align = "right" style = "width: 100px">
Select an image: <br/>
</TD>
<TD align = "Left"> <p id = "myfile"> <input onclick = "AddFile ()" type = "button" value = "add image) "> <br/>
<Input type = "file" name = "file" runat = "server" style = "width: 300px"/>
Description: <input name = "text" type = "text" style = "width: 150px" maxlength = "20"/>
</TD>
</Tr>
<Tr>
<TD align = "right" style = "width: 100px">
Uploaded Image Library: </TD>
<TD align = "Left">
<Asp: dropdownlist id = "ddlalbum" runat = "server" performanceid = "sqlperformance1"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
