如何使用 HTML 按鈕調用 Javascript function？

Question

我正在嘗試在 HTML 按鈕內實現 Javascript function 。 下面是我正在使用的 Javascript 和 HTML。 我希望提交按鈕調用 function 並將文件名和文件數據傳遞到 function，但我不確定如何執行此操作。

<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.....
}

如何將文件上傳到帶有普通 JavaScript 和 php 的服務器

使用 JavaScript 和 HTML 創建文件上傳器 5

Answer 2

在 HTML 實際上有一個名為“onclick”的事件監聽器。 嘗試在您的提交按鈕上使用它，如下所示：

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