JQuery: изменение события для ввода файла в IE

Ответ 1

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

Вот как я это исправил:

var $input = $('#your-file-input-element');

var someFunction = function()
{
    // what you actually want to do
};

if ($.browser.msie)
{
    // IE suspends timeouts until after the file dialog closes
    $input.click(function(event)
    {
        setTimeout(function()
        {
            if($input.val().length > 0) {
              someFunction();
            }
        }, 0);
    });
}
else
{
    // All other browsers behave
    $input.change(someFunction);
}

Технически вы можете/должны фильтровать условие взлома только на IE7, так как IE8 ведет себя корректно в событии изменения, но он также имеет такое же поведение, как IE7, при приостановке тайм-аутов, в то время как хромированный браузер (видимо, он считает это блокирующий ввод-вывод), поэтому он работает как есть.

Ответ 2

Это очень поздно, но у меня была та же проблема, и я решил ее с помощью стилизованного тега <label> с небольшим обходным решением для Firefox.

http://jsfiddle.net/djibouti33/uP7A9/

Цели:

• позволяет пользователю загружать файл с помощью стандартного управления вводом содержимого html
• скрыть стандартный контроль ввода файлов HTML и применить собственный стиль
• после того, как пользователь выберет файл для загрузки, автоматически отправьте форму

Браузеры:

• Firefox, Chrome, IE8/9, Safari
• IE7 не работает, но может быть, если вы добавите этот браузер к обходному пути, описанному внизу

Исходное решение:

• Скрыть ввод файла, расположив его вне экрана. Важно не отображать: нет, так как некоторым браузерам это не понравится.
• Добавьте еще один стилизованный элемент на страницу (ссылка, кнопка).
• Слушайте щелчок по этому элементу, затем программно отправляйте клик на вход файла, чтобы запустить собственный "проводник файлов"
• Прослушивание события ввода файла (происходит после выбора пользователем файла)
• Отправить форму

Проблема:

• IE: если вы программно отправляете клик на вход файла для его активации (2), программная отправка формы (5) приведет к ошибке безопасности

Обходное решение:

• То же, что и выше
• Воспользуйтесь функциями доступности, встроенными в тег (щелчок на ярлыке активирует связанный с ним элемент управления) путем стилизации тег вместо ссылки/кнопки
• Слушайте ввод файла в событие обмена
• Отправить форму
• По какой-то причине браузеры Mozilla не будут активировать ввод файла, щелкнув по нему.
• Для Mozilla, прослушайте щелчок на ярлыке и отправьте событие щелчка на вход файла, чтобы активировать его.

Надеюсь, это поможет! Ознакомьтесь с jsfiddle для получения подробных сведений о html/js/css, чтобы все это работало.

Ответ 3

Отформатируйте его так:

$("#attach").change(function() { 
  alert('I Changed');
});

Обновление: После ответа на еще один вопрос по этому вопросу мы поняли, что это было зафиксировано как часть jQuery 1.4.2 переписать запись, просто обновить до последней версии, чтобы разрешить проблему с событием change с <input type="file" /> в IE.

Ответ 4

Я использовал следующее решение. Я старался сделать это как можно более самодостаточным.

(function($) {
    if ($.browser.msie == false)
        return;

    $('input[type=file]').live('click', function(e) {
        var self = this;
        var blur = function() {
            $(self).blur();
        }
        setTimeout(blur, 0);
    });

})(jQuery);

Ответ 5

Это всегда работало для меня в IE6 ad IE7.

$('#id-of-input-type-file').change(function(){});

Ответ 6

Вероятно, это проблема с условием гонки с полями ввода в IE. Используя setTimeout, выполняемая функция зарегистрирует, что произошло изменение. Когда код UI выполняется в onChangeEvent, это событие еще не запущено, поскольку оно появляется в IE.

Я решил аналогичную ситуацию, выполнив следующее внутри моего обработчика изменений:

if (jQuery.browser.msie) { setTimeout(DoSomeUIChange, 0); } else { DoSomeUIChange(); }

DoSomeUIChange выполняется после текущего кода в очереди событий и поэтому удаляет условие гонки.

Ответ 7

У меня была такая же проблема с IE (включая IE 9). Логика пользовательского интерфейса:

• нажмите элемент div, запускает событие click на file-input-element, чтобы пользователь щелкнул диалог открытия файла триггера div
• привязать обработчик события change к file-input-element, чтобы обеспечить form при открытии диалогового окна открытия файла

Приложение (работающее внутри iframe) работает как очарование Chrome и FF. Но вскоре я обнаружил, что он не работает на IE, когда пользователь выбрал файл и закрыл диалоговое окно, которое форма не отправила.

Окончательное решение - отбросить логику # 1 "нажмите на div элемент триггера click событие на элементе ввода файла" и позволить пользователю напрямую щелкнуть по file input element, а затем он работает.

Кстати, причина, по которой у нас есть элемент div, заключается в том, что мы хотим скрыть элементы управления, отображаемые в браузере, потому что у нас есть все в фоновом изображении. Однако установите display на none, чтобы элемент управления не смог ответить на событие взаимодействия с пользователем. Поэтому мы перемещаем file-input-element к внешнему виду порта представления и используем элемент div для его замены. Так как это не работает в IE, мы заканчиваем тем, что возвращаем file-input-element и устанавливаем его opacity в 0. В IE 8 или менее, который не поддерживает opacity, мы используем фильтр, чтобы сделать его прозрачным:

#browse {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

Ответ 8

Я нашел это решение В HTML скрыть элемент файла (не использовать display: none, не работать в IE), подготовить onchange событие IE:

<div style="width: 0px; height: 0px; overflow: hidden;">
  <input id="ifile_template" type="file" onchange="this.focus(); this.blur();"/>
</div>

В javascript для функции привязки IE к размытию, а для FF, функция связывания CH CH():

$(iFile).blur(
  function () {
    ...some code...
  }
);

// FF, CH
$(iFile).change(
  function () {
  ...some code...
  }
);

Ответ 9

В IE onchange событие работает отлично, когда оно заполняется непосредственно в теге html. Как:

<input type="file" onchange="uploader.upload()" />

Ответ 10

Для IE Вы можете использовать событие "onfocus", чтобы поймать смену загрузки файла. После закрытия диалогового окна просмотра файлов запускается событие onfocus. Вы можете проверить это, добавив эту строку на свою страницу:

<input type="file" onfocus="javascript:alert('test');" />

После закрытия диалогового окна отображается предупреждающее сообщение.

Это решение предназначено только для IE, а не для FF или Chrome.

Ответ 11

Мое решение:

setInterval(function()
{
    if ($.browser.msie) $("input[type=file]").blur();
},500);

Не очень, но он работает.; D

Ответ 12

Я могу подтвердить, по крайней мере, что он работает только после события размытия, похожего на радио и флажок в IE. Мне, вероятно, придется добавить какой-то визуальный элемент, чтобы пользователь мог щелкнуть и сказать мне, когда они выбрали свой файл.

неточным.

Ответ 13

$("#attach").attr("onChange", "alert('I changed')");

Он работает в IE, но если вы хотите подражать "живому" поведению, вы должны добавить атрибут onChange к каждому новому элементу при его создании.

Ответ 14

jQuery, похоже, не распознает событие propertychange. Я добавил его в DOM node с помощью IE attachEvent().

var userChoseFile = function($input) {
    // ...
}

var $input = $(/* your file input */);
$input[0].attachEvent('onpropertychange', function() { 
    userChoseFile($input);
});

Ответ 15

Посмотрите на эту скрипку http://jsfiddle.net/uP7A9/531/

HTML:

<input type="file" name="PicturePath" id="fileUpload" accept=".png,.jpg,.jpeg,.gif,.tif" />

JQuery

$("input[type=file]#fileUpload").on("change", function () {
    alert('hi')
});

он работает для всех браузеров, протестированных.