jQuery изменить метод ввода типа = "файл"

Question

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

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

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

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

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

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

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

Answer 1

Ajax Uploader обновляет ваш элемент ввода? Если это так, вы должны рассмотреть возможность использования метода .live ().

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

Обновление:

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

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

Answer 2

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

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

Answer 3

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

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

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

EDIT:

function getFileName(elm) {
   var fn = $(elm).val();
   var filename = fn.match(/[^\\/]*$/)[0]; // remove C:\fakename
   alert(filename);
}