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

Posted 2023-03-22

【中文标题】如何将输入按钮链接到文件选择窗口？ [复制]

【英文标题】：How to link an input button to a file select window? [duplicate]

【发布时间】：2012-06-03 15:41:29

【问题描述】：

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

【问题讨论】：

也许你可以隐藏 type="file" 元素并用 jQuery 触发它？只是一个想法......

数以百万计的其他人，但没有时间选择最佳副本

查看***.com/questions/7132553/…。它可能会对你有所帮助。

@Esailija 他在哪里要求 jQuery？链接但不是欺骗。

@rlemon tbh 我只查看了前 4 个 google 结果，它们都是针对 jquery 的，所以我放弃了，只是把一些东西放在那里。但是，该副本的公认答案不使用 jQuery

【参考方案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

【讨论】：

之前没有听说过pointer-events。不幸的是，这不是一个很好的解决方案，因为我希望它可以在早期版本的 IE 中工作。 jsfiddle 解决方案看起来不错......我会尝试它以及上面的建议。

乐于助人。您可以为 IE 设置一个单独的 CSS，隐藏花哨的 div 并将标准文件输入显示为一种后备。

谨慎使用 display:none 输入文件元素。 tympanus.net/codrops/2015/09/15/…

为什么不用原生 javascript 做 jQuery 位？为什么要包含一个完全额外的库

【参考方案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" 是用户习惯用于上传文件的机制。

【讨论】：

你不能点击输入类型文件来打开文件对话框，虽然可能在 Firefox 中

在 Chrome 19 / Linux 中为我工作

可能是因为调用堆栈以点击等用户操作开始。但为什么这仍然有效，欺骗某人访问文件有点容易

@rlemon 在 Safari 534.50 中不起作用。而且也没有在 chrome 中工作...... chrome 让我失望了 :(