Fynbo:
El usuario sube un archivo al servidor junto con los detalles a través de un html para. Entonces se inserta la descripción en una base de datos MySQL.
Por el momento el proceso es manejado a través de un formulario HTML + un script php.
¿Cómo combino éstos en una única secuencia de comandos, donde se introduce la descripción través de un formulario modal, que se activa mediante un botón.
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 - peine 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";
}
?>
nyx:
Si he entendido su pregunta a este deberá hacer aquello, si no, por favor especifique lo que tengo mal, así que puedo editar mi respuesta
// 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>El código para el modal viene de aquí
Yo recomendaría el uso de AJAX para el manejo de la solicitud ya que tiene un mayor control de lo que sucede después de la presentación en vez de enviar al cliente a donde los puntos de acción del formulario