Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   IE, отправка формы с файлом через трехкратный try-catch (https://javascript.ru/forum/css-html-internet-explorer/42547-ie-otpravka-formy-s-fajjlom-cherez-trekhkratnyjj-try-catch.html)

Коля Дубр 31.10.2013 13:46

IE, отправка формы с файлом через трехкратный try-catch
 
Привет, коллеги!

Столкнулся со странным поведением IE.

Есть скрипт, который:
- по клику на ссылке активирует input[type=file]
- по change на input[type=file] создает форму, перемещает в нее инпут с выбранным файлом и субмитит в iframe.

В ИЕ10 при form.submit() бросается исключение "Отказано в доступе". Самое прекрасное - если повторить отправку в трехкратном try-catch, с третьей попытки форма отправляется.

Вот работающий пример и исходник. Смотрим в IE. При выборе файла сразу через input все отправляется с первой попытки, а вот если вызвать диалог выбора файла кликом на ссылку, в консоли будет такое:

submit 1 failed: Error: Отказано в доступе.
submit 2 failed: Error: Отказано в доступе.
submit 3 ok


Боевая задача - заменить стандартный инпут на красивую кнопку при использовании библиотеки jQuery Ajax File Upload. Добавление хака с трехкратным try-catch в исходник либы помогло, но использовать это странное решение в продакнше, без понимания природы проблемы, не хочется.

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

P.S. в комментах в блоге мне пишут, что воспроизводится также в IE9, сам не смотрел да, так и есть.

Deff 31.10.2013 18:45

http://habrahabr.ru/post/56944/
костомизация input type=file

Коля Дубр 31.10.2013 20:59

Deff, спасибо за ответ (особенно за ссылку на Google - увы, предпочитаю Яндекс, но ценю заботу, даже несмотря на ошибку в слове "кастомизация" ;) ).

Пример http://absolvo.ru/tmp/17/ - не срабатывает одиночный клик в IE, потому что якобы-видимая часть инпута - не кнопка "обзор", а в любых других частях контрола диалог открывается только даблкликом.

Найти no-js решение можно, но интереснее разобраться с IE, а именно:

1. Почему он не позволяет отправить форму?
2. Почему она отправляется с третьего раза?

Deff 01.11.2013 01:16

Грамотеи одни, ток не по теме!
<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
<form id="upload" style="background-color:#fff" method="post" enctype="multipart/form-data" action="/profile.php?">

<input id="imitation" value=""/><label style="background-color:#fff;padding:4px 8px;border:1px solid red" onclick="document.getElementById('fld1').click()" for="fld1">Выбрать Файл(фон может быть и картинкой) - Клик!</label><br /><br />
<input id="fld1" name="req_file" type="file" size="40" style="margin-top:-20px;position:absolute;z-index:-100" onchange="document.getElementById('imitation').value=this.value"/>
<input type="submit" class="button" name="upload" value="Загрузить" />
</form>

  </body>
</html>
upload

nerv_ 01.11.2013 02:40

<form>
    <label style="width: 100px; height: 50px; background: green; cursor: pointer">
        <input type="file" style="visibility: hidden" />
         The big beautiful button
    </label>
</form>

Deff 01.11.2013 02:47

nerv_,
Для старых ие нун onclick вешать (ну или функцию

nerv_ 01.11.2013 03:00

Цитата:

Сообщение от Deff
Для старых ие нун onclick вешать (ну или функцию

не верю

Deff 01.11.2013 03:09

Цитата:

Сообщение от nerv_
не верю

http://sendfile.su/889645

nerv_ 01.11.2013 03:24

насчет предложенного мной решения IE9+, ниже http://habrahabr.ru/post/60665/

почему у автора не работает написано здесь http://habrahabr.ru/post/189570/

Коля Дубр 05.11.2013 15:16

nerv_,
спасибо за ответ. По ссылке на хабре похожая проблема, видимо того же происхождения, но ведет себя все-таки по-другому.

Цитата:

Причина тому проста — IE при клике на кнопку input[type=submit] стирает имя выбранного файла в скрытом input[type=file] и переводит фокус на его текстовое поле
При отправке через form.submit() значение не стирается, вместо этого сначала два раза бросается исключение "Отказано в доступе", а на третий форма все-таки отправляется (как я это описал в первом посте).

В итоге я наверное реализую гибридный вариант: css-стилизация для старых браузеров, которые не позволяют имитировать клик по input[type="file"] + костыль с тройным try-catch для IE 9-10.


Часовой пояс GMT +3, время: 13:53.