表单提交后的Onsubmit事件处理程序（JavaScript）

Question

我有一个上传文件的表单，当选择文件后，我尝试上传文件，所以我尝试了以下代码：

<form enctype="multipart/form-data" method="POST" onsubmit="return
UploadFile(this);">                                 
<input id="upfile" type="file" onchange="this.form.submit();"/>
</form>

 function UploadFile(file){
       alert('Bleah');
       return false;
    }

在正常情况下，它应该返回false，并且表单不会重新加载页面，但是这并没有发生。

如果我在表单中添加一个提交按钮，它将按预期工作：

<form enctype="multipart/form-data" method="POST" onsubmit="return
UploadFile(this);">
<input type="submit" name="upload" value="Upload">                                  
<input id="upfile" type="file"/>
</form>

有人能够解释一下到底出了什么问题吗？

- Petru Lebada

---

你打算如何提交表单？ - lshettyl

如果您需要提交的验证，那么为什么要在选择文件后提交表单？ - Rayon

@RayonDabre，因为我不想要一个提交按钮。 - Petru Lebada

试试这个。<input id="upfile" type="file" onchange="return UploadFile(this.form);"/> - rrk

@RayonDabre，文件，当然。 - Petru Lebada

Answer 1

试试这个：

function UploadFile(file) {
  if (file.value === '') {
    alert("Invalid File");
  } else {
    alert('Form will be submitted now!');
    document.getElementById('myForm').submit();
  }
}

<form enctype="multipart/form-data" method="POST" id="myForm">
  <input id="upfile" name="upfile" type="file" onchange="UploadFile(this);" />
</form>

- Rayon

Answer 2

当选择文件后上传文件时，您必须在更改时调用UploadFile()函数，而不是在form更改标签上调用。如果您在输入更改时提交，页面将重新加载。 因此，最好使用以下内容：

$('#upfile').onchange(function(){
   if(UploadFile(this.parent('form'))){
   this.parent('form').submit();
}
})

您将不再需要在标签内使用onchange和onsubmit了。

- Vali S

Answer 3

解决方案：

<form id="formname" enctype="multipart/form-data" method="POST" action="test.html">
<input id="upfile" type="file" onchange="sendForm()"/>
</form>

<script>
  function sendForm() {
    var field = document.getElementById("upfile");
    if (field) {
      console.log("the is a file and the form will be sent");
      document.forms["formname"].submit();
    }

  }

</script>

原文-- 我不明白，你打算如何在没有提交按钮的情况下提交表单？或者至少，在javascript中处理提交"object.addEventListener("keydown", myScript);"

-- 好的，我再次阅读并理解了问题

你需要在javascript中处理并检测文件的选择。请参考这个帖子：

如何使用javascript检查是否选择了文件？

- Cynthia Sanchez

---

好的，这里有一个onchange事件，使用this.form.submit()，那不应该就像一个提交按钮一样工作吗？ - Petru Lebada

考虑到如果您需要验证，那么这就是答案，您需要验证该字段的值是否为“”（非空），然后才能提交它。 - Cynthia Sanchez

我会尝试使用纯JavaScript。 - Cynthia Sanchez

我尝试实现的是更快速、更顺畅的文件上传方式。一旦选择了文件，它就应该立即上传文件（提交表单），在提交时运行验证，并返回一个布尔值，根据这个值判断文件是否可以上传。使用你给我的线程，我无法做到这一点... - Petru Lebada

@Cynthia Sanchez，只是为了纠正你一下，field将始终返回id="upfile"的DOM对象，因此它永远不会是false。你需要检查输入的值。为了澄清，在if条件之前尝试使用~console.log(field)。 - Rayon