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

Question

可能重复:
Jquery触发器文件输入

我正在制作一个允许用户将图像上传到网站的表单.到目前为止,我已经在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的样式,并pointer-events在CSS中设置为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" />

这是一个工作小提琴.

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