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

Question

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

Я пытаюсь охватить 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() функция вызывается каждый раз, когда значение изменяется, как ожидается. Но с API jQuery .change() обработчик событий, событие срабатывает только при первом изменении значения. Любое изменение значения после этого игнорируется. Это кажется мне неправильным, но, конечно, это не может быть оплошностью jQuery, верно?

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

609 3

jQuery input event-handling file-upload onchange

3 ответов:

Comments

Ничего не найдено.

Luis Melgratti · Accepted Answer · 2013-10-12 04:47:32

загрузчик ajax обновляет ваш элемент ввода? если это так, вы должны рассмотреть возможность использования .жить() метод.
 $('#imageFile').live('change', function(){ uploadFile(); });
обновление:

С помощью jQuery 1.7+, вы должны использовать сейчас .on ()
 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });

macio.Jun · Accepted Answer · 2017-02-17 21:20:37

по состоянию на jQuery 1.7, the .жить() метод является устаревшим. Использовать.on () для присоединения обработчиков событий. Пользователи более старых версий jQuery использовать .делегат() в предпочтении к.жить.)( См.:http://api.jquery.com/on/
$('#imageFile').on("change", function(){ uploadFile(); });

rodney hise · Accepted Answer · 2018-06-11 12:48:53

Я не смог заставить IE8+ работать, добавив обработчик событий jQuery к типу ввода файла. Мне пришлось пойти в старую школу и добавить the 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);
}