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
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>  <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>
<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>  <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>
<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]);
}
?>
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
How to manage random header image in joomla | ANIL KUMAR PANIGRAHI 's Blog
July 8, 2011 at 10:15 am[…] my previous post i have explained about how to add or remove file fields using jquery, Try to use this code in your application and upload images to […]
Arka
April 19, 2013 at 5:43 amawesome bro.