Question

我创建了一个按钮来替换输入文件类型，但是当我以编程方式单击输入文件类型时，它将在上传文件之前提交表单。我需要先完成文件上传，然后再提交表单。

HTML：

<form action="" method="post" enctype="multipart/form-data">
  <button class="btn btn-space btn-primary" id="uploadFileButton">Upload File</button>
  <input type="file" name="fileToUpload" id="fileToUpload" accept=".xls, .xlsx, .csv, .txt">
</form>

JavaScript：

document.getElementById("uploadFileButton").onclick = function() {
  document.getElementById("inputFileUpload").click();
};

document.getElementById("inputFileUpload").onchange = function() {
  document.getElementById("uploadForm").submit();
};

Answer 1

type的默认<button>是“提交”

将其类型设置为'button'，以防止其提交表单

<button type="button" class="btn btn-space btn-primary" id="uploadFileButton">Upload File</button>

Answer 2

问题是替换按钮“ uploadFileButton”位于表单标签内。将其放在表格之外可解决此问题。

为什么在文件上传完成之前进行表单提交？

2 个答案: