O usuário envia um arquivo para o servidor, juntamente com detalhes através de um html para. A descrição é, em seguida, inserido num banco de dados MySQL.
Neste momento, o processo é tratado através de um formulário HTML + um script php.
Como faço para combiná-las em um único script, onde a descrição é introduzido através de um formulário Modal, ativado a partir de um botão.
index.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>
Script PHP - pente-insert.php
<?php
$link = mysqli_connect("localhost", "user", "pass", "tabledata");
// Check connection
if ($link === false) {
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Escape user inputs for security
$category = mysqli_real_escape_string($link, $_REQUEST['category']);
$title = mysqli_real_escape_string($link, $_REQUEST['title']);
$embedcode = mysqli_real_escape_string($link, $_REQUEST['embedcode']);
$video_platform = mysqli_real_escape_string($link, $_REQUEST['video_platform']);
// Attempt insert query execution
$sql = "INSERT INTO tbl_video (category, title, embedcode, video_platform) VALUES ('$category', '$title', '$embedcode', '$video_platform')";
if (mysqli_query($link, $sql)) {
echo "Records added successfully.<br />";
} else {
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>
// Upload File
<?php
$allowedExts = array("mp3", "mp4");
$extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
if ((($_FILES["file"]["type"] == "video/mp4")
|| ($_FILES["file"]["type"] == "audio/mp3")($_FILES["file"]["type"] == "audio/wma")($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/gif")($_FILES["file"]["type"] == "image/jpeg"))
&& ($_FILES["file"]["size"] < 20000000) && in_array($extension, $allowedExts)
) {
if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
} else {
echo "Din Video er blevet oploaded!!";
echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Type: " . $_FILES["file"]["type"] . "<br />";
echo "Størrelse: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " findes allerede!. ";
} else {
move_uploaded_file(
$_FILES["file"]["tmp_name"],
"upload/" . $_FILES["file"]["name"]
);
echo "Gemt i: " . "upload/" . $_FILES["file"]["name"];
}
}
} else {
echo "Invalid file";
}
?>
Se eu entendi a sua pergunta esta deve fazer a coisa, se não, em seguida, especifique o que eu tenho de errado para que eu possa editar a minha resposta
// 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>
O código para o modal vem aqui
Eu recomendaria usar AJAX para lidar com o pedido desde que você tenha um controle maior sobre o que acontece após a apresentação em vez de enviar o cliente para onde os pontos de ação formulário