上传脚本适用于jQuery v1.3.2,但不适用于1.6.2

时间:2011-07-20 03:52:24

标签: jquery version compatibility

我想用jQuery v1.6.2将这个脚本用于多个文件上传。它适用于任何版本=< 1.3.2,但不是1.4.x或更新版。

请帮助我使用1.6.2?

当我选择上传3个文件时,我删除第一个;第二和第三个文件的所有输入字段也被删除了。 :(

(使用jQuery v1.3.2时,第二个和第三个不会被删除。)

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;
            });
        }
    };

});

1 个答案:

答案 0 :(得分:1)

我仍然无法弄清楚为什么它会删除所有输入。我只能想象它与绑定到实时点击事件的myelement变量有关。每次调用输入更改函数时我们都会重用此变量,并且我不确定jQuery如何使用这些<a>点击事件处理此变量。我想我会做一些挖掘。

但是,我想出了一个解决方法。

我没有将元素存储在绑定到<a>的直播事件中,而是给出了输入和队列div data-id。因此,当单击#queue a时,它会将输入与其自己的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();
    });
});