选择带有 <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 文件（在表单的 "action" 中）。我还没有那个文件，所以它 returns 一个 HTTP 404 错误。

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

我试过使用阻止事件默认操作的事件处理程序：

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

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

有什么解决办法吗？谢谢

Answer 1

制作按钮类型 button 这样它就不会提交表单：

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

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

How to prevent form submit when choosing a file with <input type="file>?