Pages

Wednesday, January 11, 2012

Multiple Files Uploading using JQuery in ASP.NET

In this article, i tried to explain that how to upload multiple files using JQuery in as asp.net page. Also, you can check the file size and file size during the upload process and restrict the user.

Follow the below steps:

Step No. 1

You have to have the following files in and create the reference of these files in your header section of your page.

<head runat='server' ID='head1'>
    <title>Multiple Files Uploading</title>   
    <script src='Scripts/jquery-1.3.2.js' type='text/javascript'></script>
    <script src='Scripts/jquery.MultiFile.js' type='text/javascript'></script>
</head>

jquery.MultiFile.js can be download from here.


Step No. 2

Add a HTML file uploader control in your body section.

<input type='file' id='fluFile' runat='server' class='multi' accept='gif|jpg|png|bmp|jpeg' maxlength='5' />

<asp:Button ID='btnUpload' runat='server' Text='Upload All' />

class='multi' is shows that the user can select multiple files.
maxlength='5' is shows that the user can not select more than 5 files.
accept is shows that the mentioned file formats are allowed to upload.

Step No. 3

Place the following code on the button click event

Dim hfc As HttpFileCollection = Request.Files

            For i As Integer = 0 To hfc.Count - 1
                Dim hpf As HttpPostedFile = hfc(i)
                If hpf.ContentLength > 0 Then
                    If hfc.Item(i).ContentLength > 524288 Then
                        Throw New Exception('File size should not be more than 512KB')
                    Else
                        hpf.SaveAs(Server.MapPath('Files') & '\' & hpf.FileName)
                    End If
                End If
            Next

lblmsg.text = 'File(s) uploaded successfully'

The above code can be more precize and expandable as per your requirements like you can put up your own code to get file extensions and vaildate the file type and size during the uploading process.

Hope, it will work for you!

No comments:

Post a Comment