Add And Remove File Fields Using jQuery And PHP

Friday, Jan 27, 2017

Tags:- jQuery PHP


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.


See Demo
Add And Remove File Fields Using jQuery And PHP


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

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file to upload files
  3. 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.

Subscribe Our Newsletter And Get Tutorials
And Offers Via Email

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.