Introduction

Dynamic input fields allow users to add or remove multiple file inputs on a web page without refreshing the page. In this tutorial, we will implement a simple multiple-file upload form using HTML, PHP, JavaScript, and jQuery. When a user selects a file, a new file input is automatically added, while the selected file is displayed with a Remove option. The selected files are then uploaded to the server when the form is submitted.

Prerequisites

Before implementing this functionality, make sure you have the following:

  • Basic knowledge of HTML and HTML forms.
  • Basic knowledge of PHP and handling $_FILES.
  • Basic understanding of JavaScript/jQuery.
  • A web server with PHP installed, such as Apache or Nginx with PHP-FPM.
  • A writable directory where uploaded files can be stored.
  • jQuery included in the web page.
  • Basic understanding of file upload handling using multipart/form-data.

Example :

In this post  we will add the dynamic input field of file one by one and remove and upload it.

First ,Create the new file and include script file and css file inside html head

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Second, Create the basic html form with one input type file like this

<input id="Upload1" name="file[]" type="file" />

Third, Create jquery on change function for input type file,when user add the file at the time create automatically one input file created and remove button append into respective input type of file

<script type="text/javascript">
    $(document).ready(function() {

      var intCounter = 1;

      $( document ).on( 'change', '#upload_list > input', function() {
        intCounter++;
        $("#upload_list").prepend('<input type="file" name="file[]" id="Upload'+intCounter+'" />');
        $("#Upload"+(intCounter-1)).css("display", "none");
        var strImageName = '<p>' + $("#Upload"+(intCounter-1)).val() + ' <a href="#" id="'+(intCounter-1)+'">Remove</a></p>';
        $("#display_list").prepend(strImageName);
      });

      $( document ).on( 'click', '#display_list > p > a', function() {
        var intId = $(this).attr('id');
        $("#Upload"+intId).remove();
        $("#"+intId).parent().remove();
      });

    });
  </script>

Finally, add the php code for file upload when the user submit the form files are saved into folder

<?php
if (isset($_POST['submit'])) 
{
  if(isset($_FILES['file']))
  {

    foreach($_FILES['file']['tmp_name'] as $key => $tmp_name)
    {
        $file_name = $key.$_FILES['file']['name'][$key];
        $file_size =$_FILES['file']['size'][$key];
        $file_tmp =$_FILES['file']['tmp_name'][$key];
        $file_type=$_FILES['file']['type'][$key];  
        move_uploaded_file($file_tmp,"test/".time().$file_name);
    }
  }
}
?>

If following the above steps you getting code like this

<?php
if (isset($_POST['submit'])) 
{
  if(isset($_FILES['file']))
  {

    foreach($_FILES['file']['tmp_name'] as $key => $tmp_name)
    {
        $file_name = $key.$_FILES['file']['name'][$key];
        $file_size =$_FILES['file']['size'][$key];
        $file_tmp =$_FILES['file']['tmp_name'][$key];
        $file_type=$_FILES['file']['type'][$key];  
        move_uploaded_file($file_tmp,"test/".time().$file_name);
    }
  }
}
?>
<html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Multiple File Uploader</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {

      var intCounter = 1;

      $( document ).on( 'change', '#upload_list > input', function() {
        intCounter++;
        $("#upload_list").prepend('<input type="file" name="file[]" id="Upload'+intCounter+'" />');
        $("#Upload"+(intCounter-1)).css("display", "none");
        var strImageName = '<p>' + $("#Upload"+(intCounter-1)).val() + ' <a href="#" id="'+(intCounter-1)+'">Remove</a></p>';
        $("#display_list").prepend(strImageName);
      });

      $( document ).on( 'click', '#display_list > p > a', function() {
        var intId = $(this).attr('id');
        $("#Upload"+intId).remove();
        $("#"+intId).parent().remove();
      });

    });
  </script>

  <style type="text/css">
    body {
      font-family: "Arial", sans-serif;
    }
    #display_list p {
      background: #eee;
      margin: 2px;
    }
  </style>

</head>

<body>

  <form id="UploadIndexForm" enctype="multipart/form-data" method="post">
    <fieldset>
      <input type="hidden" name="MAX_FILE_SIZE" value="512000" />

      Upload file:
      <div id="upload_list">
        <input type="file" name="file[]" id="Upload1" />
      </div>

      <div id="display_list">
      </div>

      <input type="submit" name="submit" value="Upload" />
    </fieldset>
  </form>

</body>

</html>

Conclusion

In this tutorial, we implemented a dynamic multiple-file upload form using PHP, HTML, JavaScript, and jQuery. The form automatically creates a new file input when a file is selected and provides an option to remove previously selected files before submission. PHP then processes the uploaded files and stores them in the specified directory.

This approach provides a simple and user-friendly way to handle multiple file uploads dynamically without requiring users to manually add multiple file fields. For production applications, additional security measures such as file type validation, file size validation, filename sanitization, upload error handling, and secure upload directory permissions should also be implemented.

Post Views: 190

Leave a Reply