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

【问题标题】：How to prevent form submit when choosing a file with <input type="file>?选择带有 <input type="file> 的文件时如何防止表单提交？
【发布时间】：2015-12-02 07:59:49
【问题描述】：

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

<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();
}

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

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

【问题讨论】：

尽量防止默认的“onsubmit”事件
@Chris Frank 的“onsubmit”事件是什么？表格？我是否只针对带有 id 的表单？
我通常以表单id为目标
这里为什么需要这个按钮？您的所有问题都来自button 元素，只要该操作由label 执行，这绝对是不必要的。只需将按钮更改为 <div> 或设置标签样式
@aCodingN00b document.getElementById("yourForm").value != ""

标签： javascript html forms preventdefault html-input

【解决方案1】：

将按钮类型设为button，这样它就不会提交表单：

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

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

【讨论】：