JavaScript Jquery PHP PHP Code Style & Scripts

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="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript" src="http://jquery.offput.ca/js/jquery.highlightFade.js"></script>
    <script type="text/javascript">
    function addFormField() {
      var id = document.getElementById("aid").value;
      jQuery.noConflict()
      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) {
        jQuery(id).remove();
    }
    </script>

 

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" />

</form>

 

In the PHP code:

 <?php
 for($i=0;$i< count($_FILES['FileIcons2']['name']);$i++){
    move_uploaded_file($_FILES['FileIcons2']['tmp_name'][$i],"../headers/".$_FILES['FileIcons2']['name'][$i]);
    }
 ?>

Thanks.

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.