Открытие диалогового окна ввода файла и возможность загрузки в него изменения в IE?

Это в основном и упрощенно то, что у меня есть сейчас:

<style>
form.noshow { height: 0; overflow: hidden; }
</style>

<form class=noshow target="SomeIframeThatExists">
  <input type=file id=uf>
</form>

<a id=uflink href="/user/photo">Upload photo</a>

<script>
$('uf').addEvent('change', function(e) {
  // alert('oele'); // this would work fine
  this.form.submit(); // auch in IE > "Access denied" exception
});
$('uflink').addEvent('click', function(e) {
  $('uf').click(); // opens file dialog in all browsers inc IE
  return false;
});
</script>

Что он делает (идеально) в Chrome 11 и FF 4 :

  1. Форма скрыта.
  2. Вы нажимаете ссылку
  3. Открывается диалог выбора файла
  4. Вы выбираете файл
  5. Диалог закрывается
  6. Форма отправлена ​​
  7. Скрипт в iframe выполняется и фото заменено

Очень высокотехнологично и мило.

В IE все работает, кроме [6]. Форма не отправлена. Ошибка Javascript: «Доступ запрещен». Неважно, насколько форма невидима, пока диалог был открыт с помощью input.click () , форма не может быть отправлена ​​при изменении. (Функция onchange выполняется нормально. Ошибка возникает только при вызове form.submit () . )

Теперь все это я могу принять. IE отстой. Я живу с этим.

Моим решением до сих пор было проверить навигатор на наличие «MSIE», а затем, щелкнув ссылку, вместо открытия диалогового окна, показать форму (с вводом файла). Затем пользователь должен щелкнуть фактический некрасивый ввод файла, и тогда все работает нормально. Но уродливо.

Вопрос двоякий:

  1. Есть ли способ сделать это в IE так же круто, как в Chrome? БЕЗ мерзкой flash / java хрени. Только элементы html и javascript.
  2. Если нет: есть ли способ проверить поддержку form.submit () после открытия диалогового окна по ссылке (кроме ! Navigator.contains («MSIE») )?

[2] мог обнаружить исключение «Доступ запрещен» в IE, но тогда уже слишком поздно: пользователь уже открыл диалоговое окно и перешел к фотографии. Вы не хотите заставлять его делать это снова. (Даже пользователи IE этого не заслуживают.)

PS. Меня интересуют только Chrome 10+, Firefox 3.6+ и IE8 +.

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

ОБНОВЛЕНИЕ
Вторая Лучшее: обнаружите поддержку этого высокотехнологичного поведения, которое не работает только в IE. Я не хочу использовать navigator.appName.contains ('MSIE') , потому что это не гибко и не обязательно верно.

16
задан Rudie 30 October 2015 в 21:34
поделиться