从其他位置触发文件选择窗口

Triggering file select window from a different place

本文关键字：文件 选择 窗口 其他 位置      更新时间：2024-03-17

我有一个像这样的HTML表单：

<style>.hidden { display: none; }</style>
<form method="post" action="upload">
    <div id="dropzone" class="pre-upload">
        <div class="comp">
            <h1>Drop your images here</h1>
            <p>or simply click to select them.</p>
            <input type="file" name="images" id="upload_button" class="hidden" />
        </div>
            <div class="fing">
                <p>Tap to select your images</p>
            </div>
    </div><!-- Pre upload div -->
</form>

如果单击#dropzone，我想使其打开标准文件选择窗口。它应该专门打开#upload_button的文件选择器。

我尝试过以下方法，但没有成功：

$('#dropzone').click(function(){
    $('#upload_button').click();
});

正如您所看到的，我正试图通过jQuery来实现这个结果。

我以为这会触发窗口，但它什么也没做。

@投票决定关闭的人：

正如你所看到的，我的问题在你链接的另一个问题中完全没有得到回答。这是一个不同的问题，错误地嵌套了我的input。因此，在盲目投票结束之前，最好检查提供的代码，并尝试查看问题是否与常见问题有所不同。这毕竟是一个寻求帮助的网站。

它看起来像是一个循环引用问题。您的文件上传按钮位于要单击以触发该按钮的div中。从div触发对按钮的点击，也会触发对div的点击，因此它会无限递归。

如果你观察控制台，你会看到一个"Maximum call stack size exceeded"错误。

将按钮移动到要单击的div之外会使其按预期工作。

这里有一个jsfiddle来演示这个问题。

相关文章：