javascript表单提交后的onsubmit事件

Question

我有一个上传文件表单，当它被选中时我尝试上传文件，所以我尝试了这样的事情：

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

form.submit() 有效，但当然我需要在提交时进行一些验证，所以我尝试运行一个函数：

 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>

谁能解释一下这是怎么回事？

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>

Answer 2

要在文件被选中时上传文件，您必须在 input 更改而不是 form 更改标记上调用 UploadFile() 函数。如果您提交输入更改，则页面将重新加载。 所以，你最好使用这样的东西：

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

您将不再需要标签中的onchange 和onsubmit。

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 上处理此问题并检测文件的选择。看看这个帖子：

how to check if a file is selected using javascript?