fynbo :
The user uploads a file to the server along with details via a html for. The description is then inserted into a MySQL database.
At the moment the process is handled via a html form + a php script.
How do I combine these into a single script, where the description is entered via a Modal form, activated from a button.
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>
PHP script - comb-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 :
If I understood your question this shall do the thing, if not then please specify what I got wrong so I can edit my answer
// 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>The code for the modal comes from here
I would recommend using AJAX for handling the request since you have a greater control of what happens after submission instead of sending the client to where the form action points
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=401827&siteId=1