跨浏览器打开文件浏览对话框 [英] Cross browser open file browse dialog

问题描述

我一直在寻找圣杯 - 在HTML中很好的文件对话框。我想出了一个解决方案，当单击一个按钮时，使用jQuery到 click（）（hidden）文件元素。这在FireFox 4中运行正常，但Chrome和Opera失败。更改点击（）到 focus（）在Chrome中工作，但Opera没有任何工作。我还没有测试过IE，但我还不想让人生蛮荒。

以下是目前的代码：

HTML

 < div class =formFileid =profileImgContainer> 
< input type =filename =profileImgid =profileImg> 
 
< label>个人资料图片< / label> 
 
< div> 
< input type =textid =profileImgText>< input type =buttonid =profileImgButtonvalue =Choose File> 
< / div> 
< / div> 
  

jQuery
< pre $ $ $ $ $formFile input [type ='file']）。live（'change'，function（）
{
$（this）。 （。formFile）。find（input [type ='text']）。val（$（this）.val（））;
}）;
$ b $（。formFile input [type ='button']）。live（'click'，function（）
{
$（this）.parents（ find（input [type ='file']）。click（）;
}）;
$ b $（。formFile input [type ='text']）。live（'click'，function（）
{
$（this）.parents（ find（input [type ='file']）。click（）;
}）;

任何人都可以提供使用jQuery / JavaScript打开文件对话框的跨浏览器方式吗？我不想使用透明元素的技巧，因为需要有输入交互（CSS ：hover ）等。

解决方案

尝试使用 trigger（） ：

$ $ $（this）.parents（。formFile）。find 输入[类型= '文件']）触发器（ '点击'）;

I've been looking for that holy grail - nice file dialogs in HTML. I've come up with a solution that uses jQuery to click() the (hidden) file element when a button is clicked. This works fine in FireFox 4, but Chrome and Opera fail. Changing the click() to focus() worked for Chrome, but nothing in Opera works. I haven't tested IE, but I don't want to ragequit life quite yet.

Here is the current code:

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();
});

Can anyone offer a cross browser way of opening the file dialog using jQuery/JavaScript? I don't want to use the transparent element trick due to the need to have input interactions (CSS :hover) etc.

解决方案

Try using trigger():

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

这篇关于跨浏览器打开文件浏览对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！