使用<input type =“file＆gt;？选择文件时如何阻止表单提交？

Question

＆lt; p＆gt;我的页面上有一个文件输入：＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt;＆lt; input type =“file”=“”id =“file-main”style =“display：none;” name =“file-main”＆gt;＆＃xa; <=“”code =“”/>

我有一个标签指向那个输入：

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

但是当我按下按钮（选择文件）时，表单立即被提交，并尝试执行PHP文件（表格＆＃39; s＆＃34; action＆＃34; ）。 我还没有该文件，因此它返回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，因此您获得了行为。