Add And Remove File Fields Using jQuery And PHP

Last Updated : Jul 1, 2023

IN - jQuery PHP | Written & Updated By - Pragati

In this tutorial we will show you how to add and remove file fields using jQuery and PHP. Now user can add any number of file fields he wants by clicking on a single button and upload multiple files using PHP.

You may also like add and remove textbox using JavaScript.

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Add And Remove File Fields It Takes Only Three Steps:-

Make a HTML file and define markup and scripting
Make a PHP file to upload files
Make a CSS file and define styling

Step 1. Make a HTML file and define markup and scripting

We make a HTML file and save it with a name file.html

<html>
<head>
<link href="file_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function add_file()
{
 $("#file_div").append("<div><input type='file' name='file[]'><input type='button' value='REMOVE' onclick=remove_file(this);></div>");
}
function remove_file(ele)
{
 $(ele).parent().remove();
}
</script>
</head>
<body>
<div id="wrapper">

<div id='menu_div'>

<div id="form_div">
 <form method="post" action="upload_file.php" id="file_form" enctype="multipart/form-data">
  <div id="file_div">
   <div>
    <input type="file" name="file[]">
    <input type="button" onclick="add_file();" value="ADD MORE">
   </div>
  </div>
  <input type="submit" name="submit_file" value="SUBMIT">
 </form>
</div>

</div>
</body>
</html>

In this step we create a form to upload file and add one file field in starting.We create 'add more' button which is used to add more file fields as needed and it calls add_file() function is used creates a div with file field and remove button and append in 'file_div'.

We also create a remove_file() function to remove file fields after clicking of remove button by the user. You may also like dynamic form using jQuery and PHP.

Step 2. Make a PHP file to upload files

We make a PHP file and save it with a name upload_file.php

<?php
if(isset($_POST['submit_file']))
{
 for($i=0;$i<count($_FILES["file"]["name"]);$i++)
 {
  $uploadfile=$_FILES["file"]["tmp_name"][$i];
  $folder="files/";
  move_uploaded_file($_FILES["file"]["tmp_name"][$i], "$folder".$_FILES["file"]["name"][$i]);
 }
}
?>

In this step we get the file array and upload all the files present in array by using for loop in our files folder. You may also like upload files with progress bar using jQuery and PHP.

Step 3. Make a CSS file and define styling

We make a CSS file and save it with a name file_style.css

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#ECF0F1;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;	
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#626567;
}
#wrapper h1 p
{
 font-size:18px;
}
#file_div
{
 width:360px;
 padding:20px;
 margin-left:300px;
 background-color:white;
 margin-bottom:20px;
}
#file_div input[type="file"]
{
 margin-top:10px;
}
#file_div input[type="button"]
{
 background-color:#424242;
 border:none;
 width:110px;
 height:35px;
 color:white;
 border-radius:3px;
}
#file_form input[type="submit"]
{
 background-color:#424242;
 border:none;
 width:110px;
 height:35px;
 color:white;
 border-radius:3px;
}

That's all, this is how to add and remove file fields using jQuery and HTML. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on add input file and remove input file javascript helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪