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

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

$('#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>

OLD-- 我不明白，您如何在没有提交按钮的情况下提交表单？或者至少在javascript“object.addEventListener（”keydown“，myScript）中处理提交;”

- 好的，我再次读了它，我理解了这个问题

您需要在javascript上处理此问题并检测文件的选择。看看这个帖子：

how to check if a file is selected using javascript?

在javascript表单提交后提交事件

3 个答案: