Ошибка загрузки файла 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(){});
Вы можете подумать, что это функция выброса и сказать, какая разница, но это сэкономило мне много времени на проектах.