使用<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,因此您获得的行为.