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.
Pingback : How to manage random header image in joomla | ANIL KUMAR PANIGRAHI 's Blog
awesome bro.