Javascript 按钮显示选择要上传的文件对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8974633/
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
Button to show choose a file to upload dialog box
提问by oshirowanen
Instead of using an input type="file"html tag, is it possible to bring up a choose a file to uploaddialog box by clicking a input type="button"? Then when a file is selected from the choose a file to uploaddialog box, the file path gets inserted into a regular html input type="text"tag?
而不是使用的input type="file"HTML标签，是有可能带来了一个choose a file to upload通过点击对话框input type="button"？然后当从choose a file to upload对话框中选择一个文件时，文件路径被插入到一个常规的 htmlinput type="text"标签中？
I've seem that gmail does something similar but not with buttons and text inputs, they simply have a link add fileor something like that. When that link is clicked, it shows the select file(s) to upload by mail.google.comdialog box. When a file is clicked, the file name is shown on the screen.
我似乎 gmail 做了类似的事情，但没有按钮和文本输入，它们只是有一个链接add file或类似的东西。单击该链接时，它会显示select file(s) to upload by mail.google.com对话框。单击文件时，屏幕上会显示文件名。
How are they doing that?
他们是怎么做的？
采纳答案by Sam
I think most browsers have this locked down for security purposes. Buttons and text boxes can be manipulated via JavaScript. File input boxes cannot, and for good reason; imagine if a javascript could open a dialog, set the path to a sensitive file on your system, then simulate the button click to download the file!
我认为大多数浏览器出于安全目的都将其锁定。按钮和文本框可以通过 JavaScript 进行操作。文件输入框不能，这是有充分理由的；想象一下，如果 javascript 可以打开一个对话框，设置系统上敏感文件的路径，然后模拟单击按钮下载文件！
By the way, if you are looking to style it, perhaps this would work: http://www.quirksmode.org/dom/inputfile.html
顺便说一句，如果你想设计它，也许这会奏效：http: //www.quirksmode.org/dom/inputfile.html
回答by Datz Me
<input type="file" style="display:none;" id="inputfile"/>
<a href="javascript:document.getElementById('inputfile').click(); ">try this</a>
Try this one. I think it is useful.. :)
试试这个。我认为它很有用.. :)
回答by techfoobar
Check this fiddle: http://jsfiddle.net/A4BS7/1/
检查这个小提琴：http: //jsfiddle.net/A4BS7/1/
NOTE:
笔记：
a) This may not work well on older browsers (mainly IE) that don't fire the change event on the file input.
a) 这可能不适用于不会在文件输入上触发更改事件的旧浏览器（主要是 IE）。
b) For the upload to work as expected, you'll need to include the <input type="file">element in your form. The text element can be used for displaying the selected file at best.
b) 要使上传按预期工作，您需要<input type="file">在表单中包含该元素。文本元素最多可用于显示所选文件。
回答by Didier Ghys
It is not possible to alter an input[type=file]as you like, it is a purely native form element.
不可能随心所欲地改变 an input[type=file]，它是一个纯粹的原生表单元素。
Besides you won't be able to get the path to the file for security reasons. Old IE versions shows the path but it is not the case anymore with newer versions and you won't be able to do anything with the path on server-side anyway.
此外，出于安全原因，您将无法获得文件的路径。旧的 IE 版本会显示路径，但较新的版本不再如此，无论如何您将无法对服务器端的路径进行任何操作。
There are though some methods to style:
虽然有一些方法来设计样式：
