以编程方式触发“select文件”对话框
我有一个隐藏的文件input元素。 是否有可能从button的点击事件触发其select文件对话框？
如果你正在寻找自己的button来上传文件而不是使用<input type="file" /> ，你可以这样做：
<input id="myInput" type="file" style="visibility:hidden" /> <input type="button" value="Show Dialog" onclick="$('#myInput').click();" />
请注意，我使用visibility: hidden ，而不是display: none 。 您不能在未显示的文件input上调用点击事件。
这里的大多数答案都缺乏有用的信息：
是的，您可以使用jQuery / JavaScript以编程方式单击input元素，但只有在属于用户启动的事件的事件处理程序中才能执行此操作！
所以，例如，如果你脚本以编程的方式点击了ajaxcallback中的button，但是如果你在用户引发的事件处理程序中放置了相同的代码行，就不会有任何事情发生。
PS debugger; 关键字会破坏浏览窗口，如果它是在编程之前点击…至less在铬33 …
只是为了logging，有一个不需要JavaScript的替代解决scheme。 这是一个黑客攻击，利用点击标签设置关注相关input的事实。
你需要一个带有适当属性的<label> （指向input），optionnaly样式像一个button（使用bootstrap，使用btn btn-default ）。 当用户点击标签时，对话框打开，例如：
<!-- optionnal, to add a bit of style --> <link href="bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <!-- minimal setup --> <label for="exampleInput" class="btn btn-default"> Click me </label> <input type="file" id="exampleInput" style="display: none" />
我不确定浏览器如何处理type="file"元素（安全问题和所有）的点击，但是这应该起作用：
$('input[type="file"]').click();
我已经在Chrome，Firefox和Opera中testing过这个JSFiddle ，它们都显示文件浏览对话框。
最好的解决scheme，适用于所有的浏览器，甚至在手机上。
<div class="btn" id="s_photo">Upload</div> <input type="file" name="s_file" id="s_file" style="opacity: 0;">'; // jquery <script> $("#s_photo").click(function() { $("#s_file").trigger("click"); }); </script>
隐藏input文件types导致浏览器的问题，不透明是最好的解决scheme，因为它不隐藏，只是不显示。 🙂
我将input[type=file]包装在标签标签中，然后根据自己的喜好deviselabel样式，并隐藏input 。
<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload"> <input type="file"> <span><i class="fa fa-upload"></i></span> </label> <style> .fileLabel input[type="file"] { position: fixed; top: -1000px; } </style>
纯粹的CSS解决scheme。
本地唯一的方法是创build一个<input type="file">元素，然后模拟点击，不幸的是。
有一个小插件（无耻的插件），将不必要的一直这样做的痛苦： 文件对话框
fileDialog() .then(file => { const data = new FormData() data.append('file', file[0]) data.append('imageName', 'flower') // Post to server fetch('/uploadImage', { method: 'POST', body: data }) })
使用jQuery，你可以调用click()来模拟点击。
出于安全原因，没有跨浏览器的方式。 人们通常做的是将input文件覆盖在其他东西上，并将其设置为隐藏的可见性，以便它自己触发。 更多信息在这里。
这对我工作：
$('#fileInput').val('');
