How to add or remove file fields using jquery

In this post i am going to explain about how to add or remove file fields using jquery and upload using php code. In my previous code Multiple Upload files using php and javascript explained using simple javascript code. Now i will explain using jquery and with less code to implement.

how to add or remove file fields using jquery | Anil Labs

how to add or remove file fields using jquery | Anil Labs

Javascript code:


    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
    function addFormField() {
      var id = document.getElementById("aid").value;
      jQuery("#divTxt").append("<tr id='row" + id + "' style='width:100%'><td width='20%'><input type='file' name='FileIcons2[]' /></td><td>&nbsp;&nbsp<a href='#' onClick='removeFormField("#row" + id + ""); return false;'>Remove</a></td></tr>");
         jQuery('#row' + id).highlightFade({    speed:1000 });
     id = (id - 1) + 2;
     document.getElementById("aid").value = id;
      function removeFormField(id) {


In HTML code:

  <p><a href="#" onClick="addFormField(); return false;">Add</a></p>
  <form action="" method="post" name="adminForm" enctype="multipart/form-data">
  <input type="hidden" id="aid" value="1">
  <div id="divTxt"></div>
 <input type="submit" value="Upload" />



In the PHP code:

 for($i=0;$i< count($_FILES['FileIcons2']['name']);$i++){


With more than 9 years experience in PHP and Founder of Anil Labs, a blog for PHP and related posts. contributed posts regarding CodeIgniter, CakePHP and Learn PHP online ...Contact : [email protected]

Discussion 2 Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>