Multiple file upload control in ASP.NET using JavaScript

Recently I came across a requirement to provide an option for user to upload multiple files (One or More).

We have <asp:FileUpload> control in asp.net using which we can upload one file at a time.

By using a single <asp:FileUpload> control on aspx page and few lines of  java script I could solve the purpose.

Followed these steps to achieve the requirement:

Step 1:

Placed below code on .aspx page.

         <div>
            <span>
                <asp:FileUpload ID="FileUploadCtrl0" runat="server" />
                <br />
            </span>
            <input type="button" value="Add" onclick="AddFileUpload()" />
            <asp:Button ID="btnUpload" runat="server" Text="Upload Attachments" OnClick="btnUpload_Click" />
        </div>

• One asp:FileUpload control is placed on the aspx page (which always appears on the page by default)
• One HTML button (Add)  to add additional file upload controls. This is done by calling a javascript method “AddFileUpload()”
• Finally one asp:Button to handle uploading the attached documents to target location(In my case it is file system)

Step 2:

Here is the code for “AddFileUpload()” javascript method. I am using JQuery here. So dont forget to include reference to Jquery file.

   <script type="text/javascript">
        var counter = 0;
        function AddFileUpload() {
            $('.fileUploadSpan').append(
            $('<span>').append($('<input/>').attr('type', 'file').attr('name', 'FileUploadCtrl' + ++counter).attr('id', 'FileUploadCtrl' + counter), $('<input/>').attr('type', 'button').attr('value', 'Remove').click(function () { $(this).parent().remove(); --counter; }), $('<br/>'))
            );
        }
    </script>

• The javascript function “AddFileUpload” adds a file upload control and a remove button. Remove button is used to remove the associated file upload control.

Step 3:

Finally implement aspx.Button handler(btnUpload_Click)

        protected void btnUpload_Click(object sender, EventArgs e)
        {
                // Get the HttpFileCollection
                HttpFileCollection hfc = Request.Files;
                for (int i = 0; i < hfc.Count; i++)
                {
                    HttpPostedFile hpf = hfc[i];
                    if (hpf.ContentLength > 0)
                    {
                        hpf.SaveAs("C:\\Temp" + "\\" +
                          System.IO.Path.GetFileName(hpf.FileName));
                        Response.Write("File: " + hpf.FileName + " Size: " +
                            hpf.ContentLength + " Type: " + hpf.ContentType + " Uploaded Successfully");
                    }
                }
        }
Finally the output looks like this:

And this can still be extended to look very good by putting image buttons instead of normal buttons

Advertisement