Question

我有这个标记

<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()，但结果相同。

可能是什么问题？

Answer 1

这是一项安全功能。某些浏览器不允许手动点击输入类型文件。您还可以阅读有关here和here的更多信息。

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

大多数浏览器在输入字段没有时阻止提交文件接收直接点击（或键盘）事件作为安全预防措施。某些浏览器（例如Google Chrome）只是阻止点击事件，例如Internet Explorer不提交任何文件由编程触发的文件输入字段选择。 Firefox 4 （以及后来）是迄今为止唯一一个完全支持调用的浏览器在完全隐藏（显示：无）文件输入上“单击” - 活动字段。

Answer 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>

Answer 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>

触发点击输入文件

3 个答案: