如何使用 HTML 按钮调用 Javascript function？

Question

I am trying to implement a Javascript function within an HTML button. Below is the Javascript and HTML that I am using. I want the submit button to call the function with the file_name and file_data being passed into the function, but I am not exactly sure how to do this.

<form method="POST">
  <div align="center">
    <input type="file" id="myfile" name="myfile">
  </div>
  <br />
  <div align="center">
    <button type="submit" class="btn btn-primary">Add File</button>
  </div>
</form>

function uploadFile(file_name, file_data) {
  fetch("/upload-file", {
    method: "POST",
    body: JSON.stringify({ file_name: file_name, file_data: file_data }),
  }).then((_res) => {
    window.location.href = "/";
  });
}

Answer 1

const form = document.querySelector('form')

form.addEventListener('submit', (e) => {
  e.preventDefault();
//....your code.....
}

how-to-upload-files-to-a-server-with-plain-javascript-and-php

Creating a File Uploader Using JavaScript and HTML 5

Answer 2

In HTML there is actually an Event-Listener called "onclick". Try using it on your submit button like this:

<button onclick="uploadFile(file_name, file_data)">Add File</button>