Обходной путь для ввода метки файла (Firefox)

<label for="input">Label</label><input type="file" id="input"/>

В Firefox 7 невозможно запустить диалог открытия файла, нажав на метку.

Этот вопрос SO очень похож, но зеленый проверял с ним ошибку в FF. Я ищу обходной путь.

Любые идеи?

Ответ 1

Благодарю вас за это q & a... помог мне.

моя вариация решения @marten-wikstrom:

if($.browser.mozilla) {
  $(document).on('click', 'label', function(e) {
    if(e.currentTarget === this && e.target.nodeName !== 'INPUT') {
      $(this.control).click();
    }
  });
}

заметки

использование document.ready($(function() {...});) не требуется в любом решении. jQuery.fn.live позаботится об этом в случае @marten-wikstrom; явно привязанная к document, в моем примере.
с использованием jQuery.fn.on... текущей рекомендуемой техники привязки.
добавлена проверка !== 'INPUT', чтобы гарантировать, что выполнение не попадает в цикл здесь:
```
<label>
  <input type="file">
</label>
```
(поскольку щелчок по файловому полю будет возвращаться к метке)
измените event.target на event.currentTarget, чтобы начальный щелчок по <em> в:
```
<label for="field">click <em>here</em></label>
```
с использованием атрибута label control атрибута для более чистой, упрощенной ассоциации полей формы спецификации.

Ответ 2

Я придумал возможное обходное решение:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("label").click(function () {
            $("#input").click();
        });
    });
</script>
<label for="input">Label</label><input type="file" id="input"/>

Довольно странно, что FF позволяет вам имитировать щелчок по вводу файла. Я думал, что это считается угрозой безопасности...

ОБНОВЛЕНИЕ: Это общий обход:

<script type="text/javascript">
    $(function () {
        if ($.browser.mozilla) {
            $("label").live("click", function (event) {
                if (event.target == this) {
                    $("#" + $(this).attr("for")).extend($("input", this)).first().click();
                }
            });
        }
    });
</script>

Ответ 3

Параллельные проблемы возникают при использовании обнаружения браузера jQuery, прежде всего анти-шаблона использования обнаружения браузера, а не обнаружения функции, в дополнение к тому, что 1.9+ не обеспечивает эту функциональность.

Возможно, тогда решение, к которому я пришел, немного лицемерно, но оно хорошо работает и, похоже, сегодня придерживается самых лучших практик.

Во-первых, убедитесь, что вы используете условные классы Paul Irish. Затем используйте что-то вроде:

  if($("html").hasClass("ie")) {
    $("label").click();
  } else {
    $("input").click();
  }

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

Ответ 4

Диалоговое окно выбора файла может быть запущено во всех браузерах click() событие. Ненавязчивое решение этой проблемы может выглядеть так:

$('label')
    .attr('for', null)
    .click(function() {
        $('#input').click();
    });

Удаление атрибута for важно, поскольку другие браузеры (например, Chrome, IE) все равно будут его ратифицировать и дважды показывать диалог.

Я тестировал его в Chrome 25, Firefox 19 и IE 9 и работал как прелесть.

Ответ 5

Кажется, что он исправлен в FF 23, поэтому обнаружение браузера становится опасным и приводит к двойным системным диалогам; (

Вы можете добавить еще один тест, чтобы ограничить исправление до версии FF до версии 23:

if(parseInt(navigator.buildID,10) < 20130714000000){
  //DO THE FIX
}

Это довольно уродливо, но это исправление будет удалено, как только старая версия FF исчезнет.

Ответ 6

вы можете отправить событие из любого события в файл type = file, если хотите сделать входной дисплей: нет и видимость: скрытый, а затем отправить событие из, скажем, щелчок мышью изображения...

<img id="customImg" src="file.ext"/>
<input id="fileLoader" type="file" style="display:none;visibility:hidden"/>

<script>
    customImg.addEventListener(customImg.ontouchstart?'touchstart':'click', function(e){
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent('click',false,true);
        fileLoader.dispatchEvent(evt);
    },false);
</script>

Ответ 7

Работайте, когда вам не нужно/хотите иметь поле ввода (например, загрузку изображения), использовать opacity: 0 в элементе и использовать pointer-events: none; в метке. Решение действительно специфично для дизайна, но, возможно, должно работать для тех, кто приходит к этому. (до сих пор ошибка не исправлена)

http://codepen.io/octavioamu/pen/ByOQBE

Ответ 8

Отмените порядок метки и входных элементов. iow, поместите элемент метки после элемента ввода.

Ответ 9

Попробуйте этот код

<img id="uploadPreview" style="width: 100px; height: 100px;" 
onclick="document.getElementById('uploadImage').click(event);" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">
    function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };
</script>