javascript - 从不同的地方触发文件选择窗口

Question

我有一个像这样的 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 的另一个问题错。因此，在盲目投票结束之前，最好检查提供的代码并尝试看看问题是否与常见问题有所不同。毕竟这是一个寻求帮助的网站。

Answer 1

看起来像是循环引用问题。您的文件上传按钮位于您想要单击以触发该按钮的 div 内。触发div上按钮的点击，也会触发div上的点击，所以它无限递归。

如果您观察控制台，您会看到“超出最大调用堆栈大小” 错误。

将按钮移到要单击的 div 之外会使其按预期运行。

这是一个jsfiddle来演示问题。