Question

所以我试图做标准＆＃34;有一个按钮触发文件输入字段＆＃34;事情。但是，我还没有隐藏输入字段 - 现在它在页面上可以看到以及应该触发点击的按钮。但是，它无法正常工作。

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

无论出于何种原因，这都行不通。就像我说的那样，正如你所看到的那样，输入字段并没有隐藏 - 它就在页面上。什么都没发生。如果你调试它并在代码中放置断点，它永远不会被击中。我认为它必须是显而易见的东西，但我已经绞尽脑汁而且我无法弄明白。

Answer 1

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

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

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

Answer 2

你应该触发onchange而不是点击

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

点击jsfiddle

触发单击非隐藏输入字段

2 个答案: