jquery - 跨浏览器打开文件浏览对话框

Question

我一直在寻找 chalice - 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>

如果您发现问题，您可能需要在指向输入的 id 的标签中使用 for 属性。