javascript - 禁用表单自动提交

Question

我正在尝试构建一个图像上传界面，一旦从文件浏览窗口选择文件，该界面就会自动提交表单。这就是我的 HTML 的样子:

<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
  <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
  <input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>

这就是我的 JS 的样子:

$("input[type='image']").click(function() {
        $("input[id='avatar']").click();
});

问题是，一旦我单击触发#avatar的图像输入，文件浏览器就会打开，但表单会自动提交，不允许我从窗口中选择文件。

这里出了什么问题？

Answer 1

<input type="image">是一个图形提交按钮，因此当您单击它时，它会自动提交表单。这是有关它的文档:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/image 。如果你想停止表单提交，你需要取消点击的默认 Action 。所以，你的代码将是这样的:

$("input[type='image']").click(function(e) {
        e.preventDefault();
        $("input[id='avatar']").click();
});