Javascript：如何上传文件 onsubmit()？

Question

I have a JSP page with <form> that uploads a file on submit. But the upload function is not uploading any file to the server at the path /uploads .

HTML form:

<form action="./index.jsp" onsubmit="uploadFile()">
        <input type="file" class="form-control-file " placeholder="Choose file" id="excelInput">
        <button type="submit" class="btn btn-primary">Run Profiling</button>
 </form>

Javascript function to upload file:

<script>
  function uploadFile(){
      let excel = document.getElementById("excelInput").files[0];  // file from input
      alert(excel);
      let req = new XMLHttpRequest();
      let formData = new FormData();
        try{
              formData.append("excel", excel);                                
              req.open("POST", 'D:\\eclipse\\workspace\\Project2\\WebContent\\uploads');
              req.send(formData);
        }
        catch(e){ 
            alert(e);
        }
  }
  </script>

It is not going to the catch() section. But it isn't uploading either.
Is there anything missing?

Answer 1

The dupes seems to be very poor, so I post an answer.

You basically want to add an eventListener AND submit to a WEB SERVICE! Not a file location

window.addEventListener("load", function() {
  document.getElementById("uploadForm").addEventListener("submit", function(e) {
    e.preventDefault(); // stop the submit

    let excel = document.getElementById("excelInput").files[0]; // file from input

    let req = new XMLHttpRequest();
    let formData = new FormData();
    try {
      formData.append("excel", excel);
      req.open("POST", 'actual web address of a process that can handle xmlhttprequests');
      req.send(formData);
    } catch (e) {
      console.log(e);
    }
  })
})

<form action="./index.jsp" id="uploadForm">
  <input type="file" class="form-control-file " placeholder="Choose file" id="excelInput">
  <button type="submit" class="btn btn-primary">Run Profiling</button>
</form>