Кросс-браузерный диалог просмотра открытых файлов

Question

Я искал этот Святой Грааль - прекрасные файловые диалоги в HTML.Я пришел к решению, которое использует jQuery для click() (скрытого) элемента файла при нажатии кнопки.Это отлично работает в FireFox 4, но Chrome и Opera не работают.Изменение click() на focus() сработало для Chrome, но ничего в Opera не работает.Я не тестировал IE, но пока не хочу бушевать.

Вот текущий код:

HTML

<div class="formFile" id="profileImgContainer">
    <input type="file" name="profileImg" id="profileImg">

    <label>Profile Picture</label>

    <div>
        <input type="text" id="profileImgText"><input type="button" id="profileImgButton" value="Choose File">
    </div>
</div>

jQuery

$(".formFile input[type='file']").live('change', function()
{
    $(this).parents(".formFile").find("input[type='text']").val($(this).val());
});

$(".formFile input[type='button']").live('click', function()
{
    $(this).parents(".formFile").find("input[type='file']").click();
});

$(".formFile input[type='text']").live('click', function()
{
    $(this).parents(".formFile").find("input[type='file']").click();
});

Кто-нибудь может предложить кросс-браузерный способ открытия диалогового окна файла с помощью jQuery / JavaScript?Я не хочу использовать трюк с прозрачным элементом из-за необходимости взаимодействия ввода (CSS :hover) и т. Д.

Answer 1

Это может быть на несколько лет позже, но вот способ сделать это без какого-либо Javascript, а также кросс-браузер.

<label>
  Open file dialog
  <input type="file" style="display: none">
</label>

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

Answer 2

Попробуйте использовать trigger():

$(this).parents(".formFile").find("input[type='file']").trigger('click');