jquery没有触发按钮事件？

Question

我想显示一个图形按钮供用户单击以启动文件上传。

我已经创建了一个像这样的普通文件上传输入：

<input style="display:none;" id="file" type="file" name="file">

请注意，它设置为 display:none，因此我可以“覆盖”图形按钮。

然后我为人们将点击的实际图像按钮创建了一个 type="image" 的输入。正如预期的那样，它似乎覆盖了隐藏文件上传按钮所在的位置。

<input id="uploadButton" type="image" src="images/choosefile-button.png" style="width:256px;height:57px;" />

现在我使用this video 中记录的 jQuery 脚本来处理单击事件并将其传递给真正的隐藏文件上传按钮，以执行文件选择对话框。

<script>
    $(document).ready(function () {
        var intervalFunc = function () {                                               
        $('#file').html($('#file').val());
        );
        $('#uploadButton').on('click', function() {
        $('#file').click();
        setInterval(intervalFunc, 1);
        return false;
        });
    });
</script>

问题是当我点击图形按钮时，文件上传对话框没有出现。所发生的一切是通过添加图像按钮上单击发生位置的 x/y 坐标参数来更改 URL。我检查了 jQuery 是否已链接到文件中，并且确实如此。知道我正在尝试做的事情是否会奏效吗？我是否必须调整脚本以检测此按钮的正确 x/y 值范围，然后触发对底层隐藏真实按钮的点击？

Answer 1

当在$('#file').html($('#file').val()) 之后删除); 的语法错误时，似乎在stacksn-ps 返回预期结果注意，不确定包含setInterval 的目的？还有input元素没有.innerHTML

    $(document).ready(function() {
      $("#uploadButton").on("click", function() {
        $("#file").click();
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input id="uploadButton" type="image" src="http://lorempixel.com/50/50/technics" style="width:256px;height:57px;" />
<input style="display:none;" id="file" type="file" name="file">