Friday, December 10, 2010

Multi File Upload Using JQuery!

Herewith I have explained and given the code for multiple file upload using jquery.
We know all the normal upload functionality. But someone of us wants the multiple file upload in .NET. Here jquery makes that very easy.
We just use the same asp:fileupload control. If you want to accept only jpg,png only you no need to go for a customvalidator tocheck the file extension. You just add the accept="jpg|png". Thats it. It allows only files which has the extension of above.
Ok let us see the code below,

<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>

<asp:FileUpload ID="fupImage" runat="server" class="multi" accept="" />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload All" OnClick="btnUpload_Click" />

Thats it about in the UI page(aspx).
Let us see the code behind page,

the following code should be inside in the upload button event,


// Get the HttpFileCollection
HttpFileCollection hfc = Request.Files;
Guid newid = new Guid();
newid = System.Guid.NewGuid();
for (int i = 0; i < hfc.Count; i++)
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
hpf.SaveAs(Server.MapPath("Files") + "\\" +
System.IO.Path.GetFileName(newid + hpf.FileName));
Response.Write("Uploaded Successfully <br/>");
catch (Exception ex)