触发器点击非隐藏输入字段

Trigger click on non-hidden input field

本文关键字：输入 字段 隐藏 触发器      更新时间：2023-09-26

所以我正在尝试做标准的"有一个按钮触发一个文件输入字段"的事情。然而，我甚至还没有隐藏输入字段——现在它和应该触发点击的按钮一起在页面上可见。然而，它不起作用。

<body>
    <button id="uploadDocument" type="button" class="btn btn-primary btn-lg">
        <span>Check In</span>
    </button>
    <input id="fileupload" type="file" name="files[]" />
</body>
<script type="text/javascript">
    $(document).ready(function() {
        $("#uploadDocument").on("click", function() {
            $("#fileupload").trigger("click");
       });
    });
</script>

不管出于什么原因，这都不起作用。正如我所说，正如你所看到的，输入字段并没有被隐藏——它就在页面上。什么都没发生。如果调试它并在代码中设置断点，它就永远不会被命中。我想这一定是显而易见的，但我已经绞尽脑汁了，我想不通。

https://github.com/blueimp/jQuery-File-Upload/wiki/Style-Guide

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

作为安全预防措施，当输入字段没有收到直接点击（或键盘）事件时，大多数浏览器都会阻止提交文件。一些浏览器（如Google Chrome）只是阻止点击事件，而Internet Explorer则不会提交任何由程序触发的文件输入字段选择的文件。到目前为止，Firefox 4（及更高版本）是唯一一款完全支持在完全隐藏（display:none）的文件输入字段上调用"点击"-事件的浏览器。

您应该在更改时触发，而不是单击

<script type="text/javascript">
$(document).ready(function() {
    $("#uploadDocument").on("click", function() {
        $("#fileupload").trigger("change");
   });
});

请在此处查看jsfiddle

相关文章：