javascript - 选择带有 <input type="file> 的文件时如何防止表单提交？

Question

我的页面上有一个文件输入:

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

我有一个指向该输入的标签:

<button class="main-button" id="file-choose-btn"><lable for="file-main">Choose Image</lable></button>

但是当我按下按钮(选择文件)时，表单立即被提交，并尝试执行 PHP 文件(在表单的“操作”中)。我还没有那个文件，所以它返回 HTTP 404 错误。

基本上，我的问题是，如何防止在单击(或本例中的按钮)后执行表单。

我已经尝试使用阻止事件默认操作的事件处理程序:

document.getElementById("file-choose-btn").onclick = function(e){
            e.preventDefault();
}

但是我什至无法选择文件，因为窗口甚至都没有打开。

有什么解决办法吗？谢谢。

Answer 1

使按钮类型为button，这样它就不会提交表单:

<button type="button" class="main-button" id="file-choose-btn">
    <lable for="file-main">Choose Image</lable>
</button>

默认情况下，按钮的类型为 submit，因此您会得到这种行为。