We create many web application. Many application needs upload to multiple image. We are search in google for perfect solution. Something we got or nor.
There have a perfect solution for your project in visual studio with source file. You follow this article or bellow down and download source code.
At first download those essential file.
1.
JQuery multiple file
2.
JQuery Download
Create a empty project in visual studio and create a page like as Default,aspx or others name.
Default.aspx page code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery Upload multiple files in asp.net</title>
<link href="Style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.MultiFile.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<asp:FileUpload ID="file_upload" class="multi" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick="btnUpload_Click" /><br />
<asp:Label ID="lblMessage" runat="server" />
</div>
</form>
</body>
</html>
Default.aspx.cs Page code
protected void btnUpload_Click(object sender, EventArgs e)
{
HttpFileCollection imageCollection = Request.Files;
string folderPath = Server.MapPath("~/UploadFiles/");
// check folder path or create
if (!Directory.Exists(folderPath))
Directory.CreateDirectory(folderPath);
for (int i = 0; i < imageCollection.Count; i++)
{
HttpPostedFile uploadImage = imageCollection[i];
string fileName = Path.GetFileName(uploadImage.FileName);
if (uploadImage.ContentLength > 0)
{
uploadImage.SaveAs(folderPath + fileName);
lblMessage.Text = imageCollection.Count + " Uploaded Successfully";
}
}
}
Style.css CSS
.container {
width: 600px;
}
.MultiFile-label {
padding: 10px;
border: 1px solid #ccc;
}
.MultiFile-remove {
float: right;
font-size: 20px;
margin: 5px 0;
}
You write those code correctly. Hope, it's work perfectly . You also download source code.
.png)
