Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2013, 13:46
Новичок на форуме
Отправить личное сообщение для Коля Дубр Посмотреть профиль Найти все сообщения от Коля Дубр
 
Регистрация: 31.10.2013
Сообщений: 3

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, сам не смотрел да, так и есть.

Последний раз редактировалось Коля Дубр, 31.10.2013 в 21:00.
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2013, 18:45
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

http://habrahabr.ru/post/56944/
костомизация input type=file
Ответить с цитированием
  #3 (permalink)  
Старый 31.10.2013, 20:59
Новичок на форуме
Отправить личное сообщение для Коля Дубр Посмотреть профиль Найти все сообщения от Коля Дубр
 
Регистрация: 31.10.2013
Сообщений: 3

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

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

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

1. Почему он не позволяет отправить форму?
2. Почему она отправляется с третьего раза?
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2013, 01:16
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Грамотеи одни, ток не по теме!
<!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

Последний раз редактировалось Deff, 01.11.2013 в 04:09.
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2013, 02:40
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

<form>
    <label style="width: 100px; height: 50px; background: green; cursor: pointer">
        <input type="file" style="visibility: hidden" />
         The big beautiful button
    </label>
</form>
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #6 (permalink)  
Старый 01.11.2013, 02:47
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

nerv_,
Для старых ие нун onclick вешать (ну или функцию
Ответить с цитированием
  #7 (permalink)  
Старый 01.11.2013, 03:00
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Deff
Для старых ие нун onclick вешать (ну или функцию
не верю
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #8 (permalink)  
Старый 01.11.2013, 03:09
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от nerv_
не верю
http://sendfile.su/889645
Ответить с цитированием
  #9 (permalink)  
Старый 01.11.2013, 03:24
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

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

почему у автора не работает написано здесь http://habrahabr.ru/post/189570/
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #10 (permalink)  
Старый 05.11.2013, 15:16
Новичок на форуме
Отправить личное сообщение для Коля Дубр Посмотреть профиль Найти все сообщения от Коля Дубр
 
Регистрация: 31.10.2013
Сообщений: 3

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отправка формы HTML через outlook Platypus Общие вопросы Javascript 2 18.07.2013 01:07
отправка данных в инпут через AJAX imediasun1 Элементы интерфейса 2 30.01.2013 18:06
Отправка формы по нажатию на ENTER Vuzy Общие вопросы Javascript 9 24.01.2013 23:36
Отправка формы SARD jQuery 0 26.05.2011 10:52
Автоматическая отправка формы через JavaScript без использования body onload pavluxa09 Общие вопросы Javascript 0 17.11.2009 15:55