Question

我有一种情况，我想显示一个图形按钮，供用户点击以启动文件上传。

我已经创建了一个正常的文件上传输入，如下所示：

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

请注意，它设置为显示：无，因此我可以＆＃34;覆盖＆＃34;图形按钮。

然后我创建了一个输入类型=＆＃34; image＆＃34;对于实际的图像按钮，人们会点击。它按预期显示为覆盖隐藏文件上传按钮的位置。

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

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

<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())处删除语法错误时，似乎在stacksnippets返回预期结果注意，不确定包含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">

jquery没有为按钮事件触发？

1 个答案: