我正在嘗試在 HTML 按鈕中實作 Javascript 功能。下面是我正在使用的 Javascript 和 HTML。我希望提交按鈕使用傳遞給函式的 file_name 和 file_data 呼叫該函式，但我不確定如何執行此操作。我知道有一個 onClick 可以使用，但我不知道如何將檔案輸入中的資訊傳遞到函式中。
<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 = "/";
});
}
uj5u.com熱心網友回復：
創建一個從表單呼叫的 handleSubmit 函式onSubmit='handleSubmit()'。
表單資訊通過以下方式獲取：Object.fromEntries((new FormData(event.target)).entries());。這是物件型別。
function handleSubmit() {
let formValues = Object.fromEntries((new FormData(event.target)).entries());
/* call any function you want! */
}
<form action="/action_page.php" onsubmit="handleSubmit()">
Enter name: <input type="text" name="fname"/>
<input type="submit" value="Submit"/>
</form>
-------- 編輯 I. 按照以下建議：isherwood，您的結果應如下所示：
function logSubmit(event) {
let fieldValue = form.fname.value; //gets field value
event.preventDefault();
}
const form = document.getElementById('form');
form.addEventListener('submit', logSubmit);
<form id="form">
<label>Test field: <input type="text" name="fname"></label>
<br/><br/>
<button type="submit">Submit form</button>
</form>
uj5u.com熱心網友回復：
在 HTML 中，實際上有一個名為“onclick”的事件監聽器。嘗試在您的提交按鈕上使用它，如下所示：
<button onclick="uploadFile(file_name, file_data)">Add File</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/387140.html
標籤：javascript html css 按钮
上一篇：如何使用JS獲取按鈕的值
下一篇：使用javascript禁用按鈕