以编程方式触发“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('');