IE, требующий нескольких кликов для отправки

Question

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

В это наиболее просто форме, вот код:

HTML:

<form action="#"> 
    <input type="file" id="myFile" /> 
    <button id="myButton">** My Choose **</button> 
    <input type="submit" value="Submit" /> 
</form> 

JavaScript:

$(function() { 
    $('#myButton').click(function(e) { 
     e.preventDefault(); 
     $('#myFile').click(); 
    }); 
}); 

Более образец углубленные в JSFiddle: http://jsfiddle.net/XPqQB/6/

В IE, нажав на кнопку «Мой выбор», потребуется два клика на «Отправить» на фактически post. (Обычно "Myfile" будет скрыт, но для демонстрационных целей я оставляю это видно.)

шагов тестов:

• Case 1:
  1. Обновить страницу.
  2. Нажмите «Отправить». Подтвердите отправку (через инструменты разработчика).
• Случай 2:
  1. Обновить страницу.
  2. Нажмите «Обзор ...» рядом с вводом файла, выберите файл.
  3. Нажмите «Отправить». Подтвердите отправку (через инструменты разработчика). (Иногда даже это требует двух щелчков мыши!)
• Случай 3:
  1. Обновить страницу.
  2. Нажмите «Мой выбор», выберите файл.
  3. Нажмите «Отправить». Никаких действий.

Вы также можете видеть, что в случае 2 и 3, которые иногда .click() или .submit() события не срабатывает либо.

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

Answer 1

решение использовать метку, которая указывает на вход файла, вы можете применить любой стиль к метке, и он будет работать

<label for="myFile">** My Label **</label><br/> 
<input type="file" id="myFile" name="myFile" /> 

, как я понимаю, что это вызвано ограничениями безопасности IE9