How to add multiple file upload control using JavaScript in ASP.NET

Hi..

In this article I explain about to add multiple file upload control using JavaScript. In my project I need an requirement when create a page user upload an image, when they want to add one more image they will click add button then the upload control is added like what we used in Gmail account. So I goggled about this regarding topic but I didn’t find anywhere the proper solution. But I didn’t give up, then lastly  I found a piece of code to upload a controller. By using that code I make it useful for me also I decide to write articles about this topic.

Initially create one div tag where u want add the controller, then add one html input button and the assign name as ‘add’

My requirement I have to add only 6 controller for that I use if condition to check the number of controller to be added.

<input id="Button1" type="button" value="add" onclick = "AddFileUpload()" />

Then add below code in header tag, In if statement condition I declare 6 if you want to add more controller then change the value.

<script type = "text/javascript">

var counter = 0;

function AddFileUpload()

{

var i=0;

  // Check to see if the counter has been initialized

    if ( typeof AddFileUpload.counter == 'undefined' ) {

        // It has not... perform the initilization

        AddFileUpload.counter = 0;

    }

    // Do something stupid to indicate the value

 

    if (AddFileUpload.counter<5)

    {

        (++AddFileUpload.counter);

     var div = document.createElement('DIV');

     div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +

                     '" type="file" />' +

                     '<input id="Button' + counter + '" type="button" ' +

                     'value="Remove" onclick = "RemoveFileUpload(this)" />';

     document.getElementById("FileUploadContainer").appendChild(div);

     counter++;

}

}

function RemoveFileUpload(div)

{

     document.getElementById("FileUploadContainer").removeChild(div.parentNode);

     (--AddFileUpload.counter);

}

</script>

So when you press the add button the file upload control is added in the particular div tag.If you wan to remove the control click the remove button once.

I hope this helpful to you all..

Plz post your valuable comments..