触发点击输入文件 [英] trigger click on input file

问题描述

我有这个标记

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

可能是什么问题?

解决方案

这是一项安全功能.某些浏览器不允许手动单击输入类型文件.您可以阅读有关这里和这里. /p>

为什么无法以编程方式触发文件输入选择?

大多数浏览器会在输入字段未输入时阻止提交文件 为安全起见，会收到直接单击(或键盘)事件. 某些浏览器(例如Google Chrome浏览器)只是阻止click事件， 而例如Internet Explorer不提交任何已提交的文件 由程序触发的文件输入字段选择. Firefox 4 (及更高版本)是迄今为止唯一一个完全支持调用的浏览器 "click"-完全隐藏(显示:无)文件输入上的事件 字段.

i have this mark up

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

and jQuery as follow

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

the script works as expected on PC browser, but when i try on mobile device the camera doesnt prompt. also i already tried using click(), but same result.

what could be the problem?

解决方案

It's a security feature. Some browser doesn't allow a manual click on input type file. You can read more about here and here also.

Why isn't it possible to programmatically trigger the file input selection?

Most browsers prevent submitting files when the input field didn't receive a direct click (or keyboard) event as a security precaution. Some browsers (e.g. Google Chrome) simply prevent the click event, while e.g. Internet Explorer doesn't submit any files that have been selected by a programmatically triggered file input field. Firefox 4 (and later) is so far the only browser with full support for invoking "click"-Events on a completely hidden (display: none) file input field.

这篇关于触发点击输入文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！