Javascript 输入类型按钮时打开文件对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26878854/
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
Open file dialog when input type button
提问by Amin Uddin
In html we know using input type file we get file dialog to select file. Is there any way to open file dialog using input type button? We used
在 html 中，我们知道使用输入类型文件我们得到文件对话框来选择文件。有没有办法使用输入类型按钮打开文件对话框？我们用了
<input type="file" class="file" name="attachement" />
But I want to use
但我想用
<input type="button" class="file" name="attachement" />
回答by p e p
Yes - you can hide the input type="file"but still have it in your markup. You then show a regular button on your page and onclick of that button, you programmatically trigger the click event of your actual file input:
是的 - 您可以隐藏input type="file"但仍将其保留在您的标记中。然后在页面上显示一个常规按钮并单击该按钮，以编程方式触发实际文件输入的单击事件：
<input id="fileInput" type="file" style="display:none;" />
<input type="button" value="Choose Files!" onclick="document.getElementById('fileInput').click();" />
Fiddle:http://jsfiddle.net/cnjf50vd/
小提琴：http : //jsfiddle.net/cnjf50vd/
回答by Arun P Johny
You can use a button and a hidden file element
您可以使用按钮和隐藏文件元素
function openAttachment() {
document.getElementById('attachment').click();
}
function fileSelected(input){
document.getElementById('btnAttachment').value = "File: " + input.files[0].name
}<input type="file" class="file" id="attachment" style="display: none;" onchange="fileSelected(this)"/>
<input type="button" class="file" id="btnAttachment" onclick="openAttachment()" value="File"/>回答by ayman lys
U couldn't really open file dialog when the type is a button.. U can only use by default type="button" and on mouse over the button, the type will change to type='file' like that :
当类型是按钮时，您无法真正打开文件对话框。您只能默认使用 type="button" 并且鼠标悬停在按钮上时，类型将更改为 type='file' ，如下所示：
<input type="button" class="file" name="attachement" onmouseover="(this.type='file')" onmouseout="(this.type='button')" value="Choose file" />回答by Rich
no. the type attribute of input specifies what type of element you are dealing with (IE: checkbox, radio, button, submit, etc), so you have to specifically state file if you want the file dialog to open. if you want a button, then you specify the input type as a button.
不。input 的 type 属性指定您正在处理的元素类型（IE：复选框、单选、按钮、提交等），因此如果您希望打开文件对话框，则必须特别声明文件。如果你想要一个按钮，那么你将输入类型指定为一个按钮。
that's not to say you can do workarounds, but setting input type to button is not possible to force a file dialog off that button alone.
这并不是说您可以采取变通办法，但是将输入类型设置为按钮是不可能单独强制关闭该按钮的文件对话框的。
回答by Amin Uddin
Hence I want to avoid type file in html of a input so I forced to change such type in runtime
因此我想避免输入的 html 中的类型文件，所以我被迫在运行时更改这种类型
<input id="fileInput" type="button" style="display:none;" />
<input type="button" value="Choose Files!" onfocus="document.getElementById('fileInput').type='file'" onclick="document.getElementById('fileInput').click();" />
