Ошибка загрузки файла Chrome: при событии изменения не будет выполняться дважды с тем же файлом

Я работаю над этим плагином для загрузки файлов html5, но у него есть ошибка в Google Chrome, которую я не могу понять и исправить. Он отлично работает в Firefox.

ссылка jsfiddle

Проблема заключается в том, что вы не можете загружать один и тот же файл дважды со своего рабочего стола.

Когда вы сначала нажимаете, выбираете и нажимаете "ОК", чтобы загрузить файл со своего рабочего стола, он должен предупредить сообщение, например ".button-1" - зависит от выбранной кнопки загрузки.

Затем, если вы попытаетесь снова загрузить тот же файл, эта строка кода больше не будет выполнена,

$(".upload-file",object_parent).change(function() {

             ...
             ...

             alert($cm.selector);

});

Любая идея, что пойдет не так в этом плагине?

(function($){

    // Attach this new method to jQuery
    $.fn.extend({ 

        // This is where you write your plugin name
        upload_file_html5: function(options) {

            // Set the default values, use comma to separate the settings, example:
            var defaults = {
                objectSuperparent:    '.media'
            }

            var options =  $.extend(defaults, options);
            var o = options;

            var $cm = this.click(function(e){

                // <a> button is the object in this case.
                var object = $(this);

                // Get other info from the element belong to this object group.
                var object_href = object.attr('href');
                var object_parent = object.parent();
                alert($cm.selector);

                // Trigger the click event on the element.
                // Due to security policies triggering click on the input type=file is not allowed/supported in some browsers and Opera is one of them.
                //$('input[type=file]').trigger('click'); // or:
                $(".upload-file",object_parent).click();

                return false;

            });

            // Trigger ajax post when ever the file is changed by the user.
            var $cm_2 = $(".upload-file").change(function(){

                // <input> is the object in this case.
                var object = $(this);

                var object_form = object.parent();
                var object_superparent = object.parents(o.objectSuperparent);
                var path_config = $($cm.selector,object_superparent).attr('href');
                var path_post = object_form.attr('action');

                alert($cm.selector);
                //alert(path_config);

                ....
                ....

            });

        }
    });

})(jQuery);

Он работал нормально в Chrome, но недавно провалился, возможно, Chrome обновил последнюю версию на моей машине, и это обновление вызывает ошибку?

Ответ 1

Да. У моего Chrome другое поведение для Firefox, но я думаю, что Chrome правильный.

Согласно документ W3C:

событие обмена происходит, когда элемент управления теряет фокус ввода и его значение было изменено с момента получения фокуса

Если вы попытаетесь загрузить тот же файл, значение ввода файла не изменится. Попробуйте распечатать его:

$('.button-2').click(function(){
    console.log($(".list .upload-file").val())
    return false;
});

Ответ 2

Если вы хотите дважды загрузить, сбросьте значение входного файла

$('input[type="file"]').val(null);

jsfiddle test

Ответ 3

может быть, что ввод повторно отображается. По какой бы причине это ни было, для меня это не имеет значения. Функциональность $.on('change', callback) теряется.

Попробуйте использовать функцию .delegate, которую я абсолютно люблю! http://api.jquery.com/delegate/

Итак, делегат точно такой же, он просто сообщает jquery, если есть элемент, отображаемый на экране с определенным дескриптором, приложите к нему функциональные возможности.

Таким образом, даже если элемент перерисовывается, он все равно будет функционировать.

$(document).delegate('.file_upload_btn', 'change', function(){});

Вы можете подумать, что это функция выброса и сказать, какая разница, но это сэкономило мне много времени на проектах.