Метод изменения jQuery на input type="file"

Я пытаюсь охватить jQuery 100% простым и элегантным API, но я столкнулся с несогласованностью между API и прямым HTML, который я не могу понять.

У меня есть загружаемый файл AJAX script (который работает правильно), который я хочу запускать каждый раз при изменении значения входного файла. Здесь мой рабочий код:

<input type="file" size="45" name="imageFile" id="imageFile" onchange="uploadFile()">

Когда я преобразовываю событие onchange в реализацию jQuery:

$('#imageFile').change(function(){ uploadFile(); });

результат не тот. С атрибутом onchange функция uploadFile() вызывается в любое время, когда значение изменяется, как ожидается. Но с обработчиком событий jQuery API .change() событие только срабатывает при первом изменении значения. Любое изменение значения после этого игнорируется. Это кажется мне неправильным, но, конечно, это не может быть недосмотр jQuery, верно?

Кто-нибудь еще сталкивался с той же проблемой и у вас есть обходное решение или решение проблемы, отличное от того, что я описал выше?

Ответ 1

- это загружающий элемент ajax, обновляющий ваш элемент ввода? если это так, вы должны рассмотреть возможность использования метода .live().

 $('#imageFile').live('change', function(){ uploadFile(); });

обновление:

из jQuery 1.7+, вы должны использовать сейчас .on()

 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });

Ответ 2

Как и в jQuery 1.7, метод .live() устарел. Используйте .on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate() в предпочтении .live(). См. http://api.jquery.com/on/

$('#imageFile').on("change", function(){ uploadFile(); });

Ответ 3

Я не мог заставить IE8 + работать, добавив обработчик события jQuery к типу ввода файла. Мне пришлось пойти в старую школу и добавить атрибут onchange="" к тегу ввода:

<input type='file' onchange='getFilename(this)'/>

function getFileName(elm) {
   var fn = $(elm).val();
   ....
}