Question

I would like to use this script to multiple file upload with jQuery v1.6.2. It works well with any version =< 1.3.2, but not with 1.4.x or newer.

Can you please help me to to make it work with 1.6.2?

when I select 3 files to upload, then I remove the first one; all input fields of the 2nd and the 3rd file got removed too. 🙁

(With jQuery v1.3.2 the the 2nd and the 3rd do not get removed.)

HTML:

<input type="file" class="upload" name="fileX[]" />
<div id="queue" class="queue"></div>

JavaScript:

$(document).ready(function () {

    $("input.upload").change(function () {
        validateFile(this);
    });


    function validateFile(myelement) {

        //$(myelement).hide();//disabled to test

        $(myelement).parent().prepend('<input type="file" class="upload" name="fileX[]" />').find("input").change(function () {
            validateFile(this)
        });
        var elementval = myelement.value;
        if (elementval != '') {
            $("#queue").append('<div>' + elementval + '&nbsp;&nbsp;<a class="remove">X</a></div>').find("a").live('click', function () {
                $(this).parent().remove();
                $(myelement).remove();
                return true;
            });
        }
    };

});

Answer 1

I still can’t figure out why it’s removing all the inputs. I can only imagine it has to do with the myelement variable being bound to the live click event. We reuse this variable each time the input change function is called, and I’m not sure how jQuery handles this with those <a> click events. I think I’ll do some digging.

I came up with a workaround, though.

Instead of storing the element inside of the live event bound to the <a>, I gave the input and the queue div data-id‘s. So when #queue a gets clicked, it matches an input with its own data-id:

$(document).ready(function () {
    var count = 0;
    $('input.upload').live('change', function() {
        $(this).parent().prepend('<input type="file" class="upload" name="fileX[]" />');
        $(this).attr('data-id', count);
        $('#queue').append('<div data-id="' + count + '">' + $(this).val() + '&nbsp;&nbsp;<a class="remove">X</a></div>');
        count++;
    });
    $('#queue div a').live('click', function() {
        $('input[data-id="' + $(this).parent().attr('data-id') + '"]').remove()
        $(this).parent().remove();
    });
});