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。如果要停止提交表单，则需要取消单击的默认操作。所以，你的代码就是这样：

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

Answer 2

我真的不明白你的问题。这似乎有用。当我打开文件浏览器时，它不会提交表单，直到我选择图像并关闭文件浏览器。（请注意，它之后不会发布，但由于与您的问题无关的javascript错误而导致该错误。当您将此代码复制到空的html时，它应该有效）

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

禁用表单自动提交

2 个答案: