用戶通過 html 將文件及其詳細信息上傳到服務器。然后，該描述將被插入到 MySQL 數據庫中。目前，該過程是通過 html 表單 + php 腳本處理的。如何將這些組合成一個腳本，其中描述是通過模態表單輸入的，并通過按鈕激活。索引.html<head> <meta charset="UTF-8"> <title>Upload file and add to database</title></head><body> <form action="comb-insert.php" method="post" enctype="multipart/form-data"> <p> <label for="file">Choose file:</label> <input type="file" name="file" id="file"> </p> <p> <label for="category">category:</label> <input type="text" name="category" id="category"> </p> <p> <label for="title">title:</label> <input type="text" name="title" id="title"> </p> <p> <label for="embedcode">embedcode:</label> <input type="text" name="embedcode" id="embedcode"> </p> <p> <label for="video_platform">video_platform:</label> <input type="text" name="video_platform" id="video_platform"> </p> <input type="submit" value="Submit"> </form></body></html>
1 回答
牛魔王的故事
TA貢獻1830條經驗 獲得超3個贊
如果我理解你的問題，這應該可以解決問題，如果沒有，請說明我錯了什么，以便我可以編輯我的答案
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal?
btn.onclick = function() {
? modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
? modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
? if (event.target == modal) {
? ? modal.style.display = "none";
? }
}
/* The Modal (background) */
.modal {
? display: none;
? /* Hidden by default */
? position: fixed;
? /* Stay in place */
? z-index: 1;
? /* Sit on top */
? padding-top: 100px;
? /* Location of the box */
? left: 0;
? top: 0;
? width: 100%;
? /* Full width */
? height: 100%;
? /* Full height */
? overflow: auto;
? /* Enable scroll if needed */
? background-color: rgb(0, 0, 0);
? /* Fallback color */
? background-color: rgba(0, 0, 0, 0.4);
? /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
? background-color: #fefefe;
? margin: auto;
? padding: 20px;
? border: 1px solid #888;
? width: 80%;
}
/* The Close Button */
.close {
? color: #aaaaaa;
? float: right;
? font-size: 28px;
? font-weight: bold;
}
.close:hover,
.close:focus {
? color: #000;
? text-decoration: none;
? cursor: pointer;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
? <!-- Modal content -->
? <div class="modal-content">
? ? <span class="close">×</span>
? ? <form action="comb-insert.php" method="post" enctype="multipart/form-data">
? ? ? <p>
? ? ? ? <label for="file">Choose file:</label>
? ? ? ? <input type="file" name="file" id="file">
? ? ? </p>
? ? ? <p>
? ? ? ? <label for="category">category:</label>
? ? ? ? <input type="text" name="category" id="category">
? ? ? </p>
? ? ? <p>
? ? ? ? <label for="title">title:</label>
? ? ? ? <input type="text" name="title" id="title">
? ? ? </p>
? ? ? <p>
? ? ? ? <label for="embedcode">embedcode:</label>
? ? ? ? <input type="text" name="embedcode" id="embedcode">
? ? ? </p>
? ? ? <p>
? ? ? ? <label for="video_platform">video_platform:</label>
? ? ? ? <input type="text" name="video_platform" id="video_platform">
? ? ? </p>
? ? ? <input type="submit" value="Submit">
? ? </form>
? </div>
</div>
我建議使用 AJAX 來處理請求，因為您可以更好地控制提交后發生的情況，而不是將客戶端發送到表單操作點
- 1 回答
- 0 關注
- 123 瀏覽
添加回答
舉報
0/150
提交
取消