IE требует двойного щелчка с помощью настраиваемой кнопки

Ответ 1

У меня была та же проблема и нашла другой подход. Я просто сделал эту кнопку такой большой, как мне нужно, с размером шрифта на ней. Тогда человек просто не может нажимать на текстовый раздел.

<div class="divFileUpload">
    <input class="fileUpload" type="file" />
</div>

и css:

.divFileUpload {
    background-color: #F60;
    border-radius: 5px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    width: 50%
}
.fileUpload {
    cursor: pointer;
    font-size: 10000px; /* This is the main part. */
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

Ответ 2

Чтобы следить за тем, что SDLion сказал....
Это может быть то, что вы видите

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

Увеличить размер шрифта входного файла, чтобы заполнить изображение кнопки

Ответ 3

В то время как @bastos.sergio прав, что это происходит в текстовом разделе, есть способ обойти это, если вам удобно использовать JavaScript.

Вам понадобится

• Тег div обертки
• Внутренний тег dev
• Некорректный ввод формы
• JQuery (проверено на 2.1)

Шаги:

• Создайте "обертку" div
• Создайте внутреннюю кнопку "div"
• Поместите элемент формы под внутренним "button" div
• Установите "обертку" и "внутренние" divs одинакового размера
• Установите overflow:hidden на обертке
• Создайте JQuery script для параметра "внутренний" div для функции "щелчок"
• Во внутренней функции нажмите кнопку вызова .click() на входе

Кажется, работает для меня в IE 10.

$(document).ready(
    function()
    {
        $("#open_dialog").on("click",function()
                                {
                                    $("input").click();
                                });
        $("input").on("change",function()
                      {
                          alert($("input"));
                          $("#notice").html("uploading");
                      });
    });

#open_dialog
{
    position: relative;
    width: 200px;
    height: 50px;
    color: white;
    font-family: "Arial";
    font-size: 14pt;
    text-align: center;
    top: 25px;
    margin-top: -.5em;
    z-index: 1;
}

#wrapper
{
    width: 200px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    background: green;
    z-index: 0;
}
input
{
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="open_dialog">Click Me</div>
    <input type="file" />
</div>
<div id="notice">Nothing to upload</div>

Ответ 4

Двойной щелчок происходит в текстовой части загрузки файла, например, @TravisPessetto.

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

Подробнее см. здесь.

Ответ 5

Я нашел еще одно простое решение, просто запускаю событие "click" только для этого элемента:

$("input").mousedown(function() {
    $(this).trigger('click');
})

чтобы избежать проблем с другими браузерами, примените это решение только к IE:

if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
    $("#your_file_input").mousedown(function(event) {
        if (event.which == 1) {
            $(this).trigger('click');
        }
    })
}

здесь ваш измененный jfiddle, проверьте его на IE 9-10: http://jsfiddle.net/7Lq3k/

Изменить: пример изменен, чтобы ограничить обработку событий только для левого клика (см. Как отличить левый и правый щелчок мыши с jQuery для деталей)

Ответ 6

Я смешал различные решения, чтобы получить тот, который работает для меня (в каждом браузере). Он написан с использованием ЛЮБОГО вложенности.

HTML

<!--/* Upload input */-->
<div class="input-file">
  Select image
  <input type="file" />
</div>

МЕНЬШЕ CSS

/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
  position: relative;
  overflow: hidden;
  margin: 10px;

  input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 10000px;
  }

  // For Chrome
  input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
  }
}