Ввод ввода файла IE9 с использованием Javascript

У меня был пост здесь:

.change, действующий странно в IE9

Однако я столкнулся с новым инцидентом, связанным с обработкой формы загрузки файлов, и мне было любопытно, если кто-то столкнулся с этой проблемой.

Моя первоначальная проблема заключалась в том, что я не мог заставить событие onchange работать, и я подумал, что это проблема с моим javascript, но я обнаружил, что это связано с тем, как эта форма активируется.

У меня есть вход в файл

<input type="file" name="abc"/>

теперь я сделал 2 вещи.

Я скрыл вход и создал кнопку (для лучшего управления стилем), которая активирует ввод.

<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>

а затем JS для взаимодействия между ними:

$("#mybutton").click(function() {
    $("Input[type=file]").click()
};

и, конечно, submit для формы (я использую родительский элемент в этом примере, но в моем фактическом коде я использую идентификатор формы).

$("input[type=file]").change(function() {
  $(this).parent().submit();
});

Когда я нажимаю "mybutton", ожидается ожидаемый результат, откроется окно просмотра и позволяет выбрать файл с моего компьютера. Также, когда я изменяю файл во всех браузерах, кроме IE, запускается событие onchange. Теперь, если я покажу форму и вручную нажмите кнопку "просмотреть" и выберете файл, событие onchange будет запущено. Таким образом, в основном браузер рассматривает нажатие кнопки фактического файла иначе, чем выполнение $( "input [type = file]" ). Click()

Кто-нибудь знает, как это исправить?

Ответы

Ответ 1

Как уже было сказано, IE очень строг при отправке формы, содержащей входные файлы. Ввод файлов должен запускаться с помощью реального щелчка мыши, чтобы разрешить отправку формы. Additionnaly, кажется, есть ошибка с IE9 и файлами.

Хорошей новостью является то, что существует способ обойти ограничение безопасности от IE с помощью метки:

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

Ответ 2

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

Ответ 3

  • убедитесь, что ваш код находится в $("document").ready(function(){... here..});

  • Кажется, что входы файлов при подключении с помощью .live("change", function(){}); не работают хорошо

другой стиль - это что-то еще, но CSS не так уж сложно - красивая загрузка файла