Javascript 如何将输入按钮链接到文件选择窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10798761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to link an input button to a file select window?
提问by diggersworld
Possible Duplicate:
Jquery trigger file input
可能的重复：
Jquery 触发器文件输入
I'm working on a form which allows users to upload images to a website. So far I have got a drag and drop solution working in Chrome and Safari. However I also need to support the action of users clicking a button and browsing for files in the traditional manner.
我正在开发一种允许用户将图像上传到网站的表单。到目前为止，我有一个在 Chrome 和 Safari 中工作的拖放解决方案。但是，我还需要支持用户单击按钮并以传统方式浏览文件的操作。
Similar to what this would do:
类似于这样做：
<input type="file" name="my_file">
However rather than having the clunky file description area and un-editable Browse button I would rather use something like this:
然而，与其使用笨拙的文件描述区域和不可编辑的浏览按钮，我宁愿使用这样的东西：
<input type="button" id="get_file">
My question therefore is how to I make this button open a file selection window and process the selection the same way that type="file"would work?
因此，我的问题是如何让这个按钮打开一个文件选择窗口并以同样的方式处理选择type="file"？
Cheers.
干杯。
My Solution
我的解决方案
HTML:
HTML：
<input type="button" id="my-button" value="Select Files">
<input type="file" name="my_file" id="my-file">
CSS:
CSS：
#my-file { visibility: hidden; }
jQuery:
jQuery：
$('#my-button').click(function(){
$('#my-file').click();
});
Working in Chrome, Firefox, and IE7+ so far (haven't tried IE6).
目前在 Chrome、Firefox 和 IE7+ 中工作（还没有尝试过 IE6）。
回答by Greg
You could use JavaScript and trigger the hidden file input when the button input has been clicked.
您可以使用 JavaScript 并在单击按钮输入时触发隐藏文件输入。
http://jsfiddle.net/gregorypratt/dhyzV/- simple
http://jsfiddle.net/gregorypratt/dhyzV/- 简单
http://jsfiddle.net/gregorypratt/dhyzV/1/- fancier with a little JQuery
http://jsfiddle.net/gregorypratt/dhyzV/1/- 有一点 JQuery 的爱好者
Or, you could style a div directly over the file input and set pointer-eventsin CSS to none to allow the click events to pass through to the file input that is "behind" the fancy div. This only works in certain browsers though; http://caniuse.com/pointer-events
或者，您可以直接在文件输入上设置 div 的样式并pointer-events在 CSS 中设置为 none 以允许单击事件传递到花式 div“后面”的文件输入。不过，这只适用于某些浏览器；http://caniuse.com/pointer-events
回答by James Hill
If you want to allow the user to browse for a file, you need to have an input type="file"The closest you could get to your requirement would be to place the input type="file"on the page and hide it. Then, trigger the click event of the input when the button is clicked:
如果您想允许用户浏览文件，您需要有一个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" />
Here's a working fiddle.
这是一个工作小提琴。
Note:I would not recommend this approach. The input type="file"is the mechanism that users are accustomed to using for uploading a file.
注意：我不推荐这种方法。这input type="file"是用户习惯用于上传文件的机制。
