JQuery: имитация щелчка на <input type="file"/"> не работает в Firefox?

Возможный дубликат:
В JavaScript я могу сделать событие "click" программным образом для элемента ввода файла?

У меня есть веб-страница, которая выглядит так:

<html>
    <head>
        <title>File Upload Click Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>
        <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div>
        <input type="file"></input>
    </body>
</html>

Моя цель состоит в том, чтобы div увеличил событие click на входе файла, и это, похоже, работает точно так, как я ожидал бы в IE и Chrome, но не работает в Firefox (ни один браузер не открывается, когда вы нажмите на div).

Есть ли способ заставить это работать в FF?

Ответы

Ответ 1

Есть ли способ заставить это работать в FF?

Нет, и он не работает в большинстве распространенных версий IE. IE откроет диалог, но как только вы выберете файл с ним, форма не будет отправлена.

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

Научитесь любить серое поле для загрузки файлов или используйте прогрессивное расширение, чтобы заменить его на Flash, где он доступен.

Ответ 2

Здесь обходной путь (FF). Бит HTML:

<label>Upload Business Logo</label>
<input type="file" name="logo" id="logo" class="file-upload" />
<input type="text" id="text-logo" class="text-upload" readonly/>
<input type="button" id="btn-logo" class="btn-upload" alt="" />

CSS для типа входного файла:

.file-upload { display:none; }

бит jQuery:

//bind click
$('#btn-logo').click(function(event) {
  $('#logo').click();
});

//capture selected filename
$('#logo').change(function(click) {
  $('#text-logo').val(this.value);
});

После отправки формы скрытый входной файл выгрузит файл. Надеюсь, это поможет:)