I have a problem by adding ""input type=file"" dynamically.
I have a formula where the user can select multiple files and can type a title under each selected file, before the user click on the Upload button.
When the forumla gets loaded, i want that there is only 1 select button and 1 title field. If the user selected 1 file, then there should show up a new "select file" button and a new title field. (Add buttons dynamically)
I think my problem has something to do with file.setAttribute("name", "sel_file"); in the JS part and with this for loop
for($mf = 0; $mf < count($_FILES['sel_file']['tmp_name']); $mf++)
in the php part.
It seems php cannot work with "sel_file"
Anyway, here is my code (The whole code is in 1 php file):
(and ignore the security issues, I will do this later)
PHP Part
<?php
$db = mysqli_connect("localhost", "root", "", "xy");
// If upload button is clicked ...
if (isset($_POST['upload']))
{ // Get post title
$post_title = mysqli_real_escape_string($db, $_POST['post_title']);
$sql_p = "INSERT INTO posts (post_title) VALUES ('$post_title')";
if (mysqli_query($db, $sql_p))
{
$post_id = mysqli_insert_id($db);
for($mf = 0; $mf < count($_FILES['sel_file']['tmp_name']); $mf++)
{
$file = $_FILES['sel_file']['name'][$mf];
$tmp_file = $_FILES['sel_file']['tmp_name'][$mf];
$target = "files/". basename($file);
$file_title = (isset($_POST['file_title'][$mf])?$_POST['file_title'][$mf]:"");
if (move_uploaded_file($tmp_file, $target))
{
echo "File: ".$file." ✔<br>";
}
else
{
echo "File: ".$file." - Upload failed<br>";
}
$sql_f = "INSERT INTO files (file, file_title, post_id) VALUES ('$file', '$file_title', $post_id)";
mysqli_query($db, $sql_f);
}
}
}
?>
HTML & JS Part
<!DOCTYPE html>
<html>
<head>
<title>Project | XY</title>
<meta charset="UTF-8"/>
<script>
window.addEventListener("load", function()
{
document.getElementById("add").addEventListener("click", function()
{
// Create a div
var div = document.createElement("div");
// Create a file input
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "sel_file");
// Create a text input
var text = document.createElement("input");
text.setAttribute("type", "text");
text.setAttribute("name", "file_title");
// add the file and text to the div
div.appendChild(file);
div.appendChild(text);
//Append the div to the container div
document.getElementById("container").appendChild(div);
});
});
</script>
</head>
<body>
<div id="frame_form">
<form method="POST" action="TEST.php" enctype="multipart/form-data">
<div id="post_title">
<input type="text" name="post_title" placeholder="* Post Title *">
</div>
<br>
<form>
<div>
<input type="button" value="add" id="add" />
<div id="container"> </div>
</div>
</form>
<br>
<div id="upload_button">
<button type="submit" name="upload">+upload</button>
</div>
</form>
</div>
</body>
</html>
Before i had no JS code, instead i had the following code, and it worked very well, but was not dynamically ...:
<?php $sfq = 2 ?>
<?php
for ($sf=0; $sf<$sfq; $sf++){ ?>
<b><?php echo $sf+1 ?></b><br>
File: <input type="file" name="sel_file[<?php echo $sf ?>]"><br>
Title: <input name="file_title[<?php echo $sf ?>]"><br>
<?php } ?>
