跨浏览器打开文件浏览对话框答案

【问题标题】：Cross browser open file browse dialog跨浏览器打开文件浏览对话框
【发布时间】：2011-06-23 20:24:56
【问题描述】：

我一直在寻找那个圣杯——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）等，我不想使用透明元素技巧。

【问题讨论】：

+1 I don't want to ragequit life quite yet :-)
谢谢andyb。 IE是我存在的祸根。如果它掉进洞里死了（或者被 FF、Chrome、盘子上的香肠等取代），那么我和其他所有的 Web 开发人员都会更快乐！
不能再同意了！顺便说一句，你见过stackoverflow.com/questions/210643/…
我刚刚关闭了另一个标签页，所以我会说是的 ;-) 我现在正在阅读。

标签： jquery html file-upload

【解决方案1】：

这可能晚了几年，但这是一种无需任何 Javascript 且跨浏览器的方法。

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

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

【讨论】：

我认为这是我在 StackOverflow 上见过的最聪明的答案。

【解决方案2】：

尝试使用trigger()：

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

【讨论】：

现在 FF4 和 Chrome 运行良好，但 Opera 11.11 不想运行良好。有什么想法吗？