Question

可能重复：
Jquery trigger file input

我正在制作一个允许用户将图像上传到网站的表单。到目前为止，我已经在Chrome和Safari中使用了拖放解决方案。但是，我还需要支持用户单击按钮并以传统方式浏览文件的操作。

与此相似：

<input type="file" name="my_file">

然而，我宁愿使用这样的东西，而不是使用笨重的文件描述区域和不可编辑的浏览按钮：

<input type="button" id="get_file">

因此，我的问题是如何让这个按钮打开文件选择窗口并按照type="file"的工作方式处理选择？

干杯。

我的解决方案

HTML：

<input type="button" id="my-button" value="Select Files">
<input type="file" name="my_file" id="my-file">

CSS：

#my-file { visibility: hidden; }

jQuery的：

$('#my-button').click(function(){
    $('#my-file').click();
});

到目前为止在Chrome，Firefox和IE7 +中工作（尚未尝试过IE6）。

Answer 1

单击按钮输入时，您可以使用JavaScript并触发隐藏文件输入。

http://jsfiddle.net/gregorypratt/dhyzV/ - 简单

http://jsfiddle.net/gregorypratt/dhyzV/1/ - 有点JQuery的发烧友

或者，您可以直接在文件输入上设置div的样式，并将CSS中的pointer-events设置为none，以允许单击事件传递到花式div“后面”的文件输入。这仅适用于某些浏览器; http://caniuse.com/pointer-events

Answer 2

如果您想允许用户浏览文件，则需要input type="file"您可以获得的最接近的要求是将input type="file"放在页面上并隐藏它。然后，在单击按钮时触发输入的单击事件：

#myFileInput {
    display:none;
}

<input type="file" id="myFileInput" />
<input type="button"
       onclick="document.getElementById('myFileInput').click()" 
       value="Select a File" />

这是a working fiddle。

注意：我不推荐这种做法。 input type="file"是用户习惯用于上传文件的机制。

如何将输入按钮链接到文件选择窗口？

2 个答案: