如何在多文件上传公式中动态添加“input type = file”按钮[PHP，MySQL＆JS]

问题描述：

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." &#10004;<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">&nbsp;</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 } ?>

答

Since your PHP is expecting those two fields to be arrays, you need to be sure you are setting the name of those input fields to behave as an array when posted.

So where you have the JS of:

      var file = document.createElement("input");
      file.setAttribute("type", "file");
      file.setAttribute("name", "sel_file"); 

      var text = document.createElement("input");
      text.setAttribute("type", "text");
      text.setAttribute("name", "file_title");

Change the name assignments to:

      var file = document.createElement("input");
      file.setAttribute("type", "file");
      file.setAttribute("name", "sel_file[]"); 

      var text = document.createElement("input");
      text.setAttribute("type", "text");
      text.setAttribute("name", "file_title[]");

Note the brackets. This makes php turn those multiple named inputs into an array, so the rest of your PHP will work correctly.

如何在多文件上传公式中动态添加“input type = file”按钮[PHP，MySQL＆JS]

相关推荐