来自 JavaScript 的文件对话框 *无* <input>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8385758/
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
File dialog from JavaScript *without* <input>
提问by jvlarsen
I am adding file import functionality to an existing page.
我正在向现有页面添加文件导入功能。
I want to do this using javascript and without modifying the page, ie. without adding the "input type="file" " tag, everyone seems to be talking about.
我想使用javascript而不修改页面来做到这一点，即。不加"input type="file" "标签，大家好像都在议论纷纷。
I have added the button, now I want the event to show the file dialog, user to browse for file and javascript to submit file to server for validation.
我已经添加了按钮，现在我希望事件显示文件对话框，用户浏览文件和 javascript 将文件提交到服务器进行验证。
How do I do that? Btw, main priority is opening file dialog, so no need for user or submitting part, if you don't know it.
我怎么做？顺便说一句，主要优先事项是打开文件对话框，所以不需要用户或提交部分，如果你不知道的话。
Thx
谢谢
回答by
Well, if I understand correct what you want, is some like this...
好吧，如果我理解正确你想要什么，是这样的......
<input type="button" value="Add File" onclick="document.getElementById('file').click()" />
<input type="file" id="file" style="display:none" />
Hidding the fileobject and calling the file dialog with another object. Right ?
隐藏file对象并使用另一个对象调用文件对话框。对 ？
EDIT: Only Javascript
编辑：只有 Javascript
onclick="var f=document.createElement('input');f.style.display='none';f.type='file';f.name='file';document.getElementById('yourformhere').appendChild(f);f.click();"
Put this in your object with the idof your formin place of yourformhere!!
把它放在你的对象中，用id你form的代替yourformhere！！
回答by JP de la Torre
Here's is a way of doing it without any Javascript and it's also compatible with every browser, including mobile.
这是一种无需任何 Javascript 的方法，它也与所有浏览器（包括移动设备）兼容。
BTW, in Safari, the inputgets disabled when hidden with display: none. A better approach would be to use position: fixed; top: -100em.
顺便说一句，在 Safari 中，input使用display: none. 更好的方法是使用position: fixed; top: -100em.
<label>
Open file dialog
<input type="file" style="position: fixed; top: -100em">
</label>
If you prefer you can go the "correct way"by using forin the labelpointing to the idof the input like this:
如果您愿意，可以通过在指向输入的 中使用“正确的方式”，如下所示：forlabelid
<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">
回答by Israel Ortiz Cortés
I hid my first button like this
我像这样隐藏了我的第一个按钮
<input style="display:none;" type="file" id="file" name="file"/>
The following triggers the input file:
以下触发输入文件：
<i class="fa fa-camera-retro fa-3x" type="button" data-toggle="tooltip" title="Escoje tu foto de perfil" id="secondbutton" ></i>(i used an icon)
<i class="fa fa-camera-retro fa-3x" type="button" data-toggle="tooltip" title="Escoje tu foto de perfil" id="secondbutton" ></i>（我使用了一个图标）
Which triggers my second button:
这触发了我的第二个按钮：
$( "#secondbutton" ).click(function() {
$( "#file" ).click();
});
