触发点击输入文件答案

【问题标题】：trigger click on input file触发点击输入文件
【发布时间】：2014-11-11 05:57:36
【问题描述】：

我有这个标记

<div id="wrapper">
    <input type="file" id="file" accept="image/*" capture="camera">
    <a href="#" id="capture">Submit Cleanup</a>
</div>

和jQuery如下

jQuery(function($){
    $('#capture').on('click', function(e){
        e.preventDefault();
        $('#file').trigger('click');
    });
});

脚本在 PC 浏览器上按预期工作，但是当我在移动设备上尝试时，相机没有提示。我也已经尝试过使用click()，但结果相同。

可能是什么问题？

【问题讨论】：

你试过$('#file')[0].trigger('click');吗？
@Satpal 是的，也已经尝试过了，但仍然无法正常工作。安东可能是手机本身的问题吗？ :|
在我的 android v4.4.2 jsfiddle.net/qd2r01er 上工作正常@你在试什么手机？
$('#file').trigger('click');
@JqueryKing 请看我当前的代码..

标签： javascript jquery

【解决方案1】：

这是一项安全功能。一些浏览器不允许非手动点击文件输入。你可以阅读更多关于它的信息here 和here。

为什么不能以编程方式触发文件输入选择？

大多数浏览器会在输入字段没有提交时阻止提交文件接收直接单击（或键盘）事件作为安全预防措施。一些浏览器（例如谷歌浏览器）只是阻止点击事件，而例如Internet Explorer 不会提交任何已被由程序触发的文件输入字段选择。火狐 4 （以及更高版本）是迄今为止唯一完全支持调用的浏览器 “点击”- 完全隐藏（显示：无）文件输入的事件字段。

【讨论】：

感谢您的提问。我会按照说明进行更改

【解决方案2】：

在大多数浏览器中（

jQuery(function($){
    $('#capture').on('click', function(e){
        e.preventDefault();
        $('#file')[0].click();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <input type="file" id="file" accept="image/*" capture="camera">
    <a href="#" id="capture">Submit Cleanup</a>
</div>

【讨论】：

【解决方案3】：

<label>
<input type="file" name="myfile" accept="application/pdf" id="myfile" style="display:none">
CLICK HERE!
</label>
<br>
<a href="javascript:document.querySelector('input#myfile').click()">OR HERE</a>

【讨论】：