Событие изменения ввода файлов срабатывает только один раз

Question

Я создал небольшой скрипт, использующий некоторые функции файлов HTML5, который позволяет вам выбрать один или несколько файлов, и каждый раз он будет писать имя файла (ов).Все работает как надо, только событие, которое обнаруживает изменение значения файлов ввода, срабатывает только один раз, так как я могу заставить его срабатывать при каждом изменении, а не только при первом изменении?

Кстати, здесьэто то, что я сделал: http://tamir.netspot.co.il/html5/files/

Answer 1

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

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

jsfiddle test

Answer 2

Похоже, что прослушиватель событий change удаляется, потому что вы используете innerHTML для обновления того же элемента (wrapper), в котором находится сам вход.Таким образом, содержимое элемента wrapper, включая ввод файла, перерисовывается, и по ходу дела слушатель событий удаляется (или, скорее, он подключен к элементу, которого там больше нет).

Вот простой jsfiddle , который делает то же самое, что и ваш код, за исключением того, что он печатает выбранные имена файлов в элементе, отличном от элемента, в котором находится ввод. И это работает (в любом случае в WebKit

Вот еще одно доказательство (я в основном скопировал ваш код и добавил строку для перерегистрации прослушивателя событий только после изменения wrapper.innerHTML)

событие change запускает для каждого изменения, но наблюдаемый ввод удаляется с помощью innerHTML на родительском элементе ввода.

---

Честно говоряне знаю, является ли это допустимой ошибкой браузера или нет.innerHTML имеет смысл "перезаписать" существующий элемент ввода, но браузер достаточно умен, чтобы не сбрасывать значение ввода, так что вы можете подумать, что слушатели тоже будут задерживаться ... так что ... ну, это сбивает с толку

Answer 3

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

с помощью jquery ...

$('#myfileinputfieldid')[0].onchange = function(e) {
 //do something with e.  Like write an image to a canvas or make a yummy cup of coffee
  e.target.value = '';
};

. После того, как вы изменили значение на что-то, отличное от файла, который был выбран при следующем щелчке по входному файлу, событие onchange сработает.

Answer 4

Вместо использования onchange используйте событие oninput

 $scope.ShowIcon = function (input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#iAIcon')
                    .attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);           
        }        
    }

Answer 5

Я получил обратный вызов .change для запуска каждого нового файла, переназначив функцию .change в конце собственного обратного вызова:

$('#myfileinputfieldid').change(function (event) {
    scope.processFile(event.target.files[0]);
});

scope.processFile = function(fileStruct) {
    doStuff;

    // Reassign the onchange callback.
    $('#myfileinputfieldid').change(function (event) {
        scope.processFile(event.target.files[0]);
    });
};

Answer 6

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

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

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

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

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

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

Answer 7

addEventListener не будет работать для IE8 (не уверен насчет IE9 и выше).Нам нужно использовать attachEvent listiner.Если вам нужна кросс-браузерная поддержка, используйте эту

if (!inputfile.addEventListener) {
    inputfile.attachEvent("onclick", setCheckedValues); //IE8
}else {
    inputfile.addEventListener("click", setCheckedValues, false); //Other browser
}

Answer 8

Ничто из вышеперечисленного не помогло мне, мне фактически приходилось создавать новое «пустое» поле ввода файла каждый раз, когда оно менялось, что позволяло мне снова захватывать событие изменения.

Процесс для меня был:

OnChange - переместить ввод файла в другой элемент - создать новый файл для повторного ввода события изменения