用户通过 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 关注
- 78 浏览
添加回答
举报
0/150
提交
取消