23

可能重复：
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）。

4

2 回答 2

34

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

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

http://jsfiddle.net/gregorypratt/dhyzV/1/ - 有点 JQuery 的爱好者

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

于 2012-05-29T12:22:28.883 回答
10

如果您想允许用户浏览文件，您需要有一个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"是用户习惯用于上传文件的机制。

于 2012-05-29T12:09:20.420 回答