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

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

24 голосов
/ 06 февраля 2012

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

jsfiddle link

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

Когда вы впервые щелкаете, выбираете и нажимаете OK, чтобы загрузить файл со своего рабочего стола, он должен предупредить сообщение, например, «.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's 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 обновил последнюю версию для моей машины, и это обновление вызывает ошибку?

Ответы [ 3 ]

46 голосов
/ 01 июля 2012

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

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

jsfiddle test

16 голосов
/ 06 февраля 2012

Да. Мой Chrome отличается от Firefox, но я думаю, что Chrome верен.

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

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

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

$('.button-2').click(function(){
    console.log($(".list .upload-file").val())
    return false;
});
2 голосов
/ 01 января 2017

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

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

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

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

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

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

...