Question

I’m making a multi file uploader using ASP.NET, and i know that IE doesn’t support multiple attribute inside <input type="file"/>.

So i wrote a jQuery code which checks if the user uses IE or not. If yes then show a button that let’s the user add more than one file upload control, so he can upload more than one file too.

The problem is, When user clicks on that link to generate the <input/> control, and then clicks again to add a third one. Nothing happen! .. Only one control is added so it’d be two controls to use. Not more, no matter how much he clicks no more <input/> controls is added.

Here’s my code :

$(function () {
    if (!('multiple' in document.createElement('input'))) {
        var add_btn = $("<a href='#'>Add more photos</a>").insertAfter("#ContentPlaceHolder1_upload_lbl");
        var upload_pnl = $('<input type="file" runat="server"/>');
        var upload_holder = $("#fileinput_placeholder");
        add_btn.on("click", function () {
            upload_holder.append(upload_pnl);
            alert("click event called(debugging)");
        });
    }
});

Here’s a picture of the node tree of that portion :

Answer 1

On the click event you are appending upload_pnl, and each consecutive click you are appending the same element, hence you only get 2.

To add more you either need to create the element inside the click event callback, or maybe use something like the jquery clone function to create a new one.

var upload_pnl = $('<input type="file" runat="server"/>');
var upload_holder = $("#fileinput_placeholder");
add_btn.on("click", function () {
    upload_pnl.clone().appendTo(upload_holder);
    alert("click event called(debugging)");
});

Also as fscan pointed out the runat=”server” wouldn’t make this new element accessible in the code behind as the page is now client side.