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>

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

Answer 2

尝试使用trigger()：

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

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

2 个答案: