Member Avatar for anony

This is my code for multiple file upload. When the user clicks on attach more files link
$max_no_img should be incremented but i am not able to figure out how to do it.

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title></title>
<script type="text/javascript">
function increment(){
     max_no_img++;
     return max_no_img;
}
</script>
</head>

<body>
<?
$max_no_img=2;  // Maximum number of images value to be set here
echo "<form method=post action=addimgck.php enctype='multipart/form-data'>";
echo "<table border='0' width='400' cellspacing='0' cellpadding='0' align=center>";
for($i=1; $i<=$max_no_img; $i++){
echo "<tr><td>Images $i</td><td>
    <input type=file name='images[]' class='bginput'></td></tr>";
}?>
<a href='addimg.php' onclick='increment();'>attach more files</a>
<?php
echo "<tr><td colspan=2 align=center><input type=submit value='Add Image'></td></tr>"; 
echo "</form> </table>";
?>
</body>

</html>

Any help will be appreciated as i am a newbie.

Edited by Reverend Jim because: Fixed formatting
  • 3 Contributors
  • 11 Replies
  • 3K Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by vibhaJ
Member Avatar for vibhaJ

JS code runs on client side.
If you will give href on "attach more files" that means page is changed. And you can not have count of click.

you can add file element dynamically using JS.
Below code will give number of click without href.

<script type="text/javascript">
var max_no_img = 0;
function increment(){
max_no_img++;
alert('max_no_img : '+max_no_img);
return max_no_img;
}
</script>

<?
$max_no_img=2; // Maximum number of images value to be set here
echo "<form method=post action=addimgck.php enctype='multipart/form-data'>";
echo "<table border='0' width='400' cellspacing='0' cellpadding='0' align=center>";
for($i=1; $i<=$max_no_img; $i++){
echo "<tr><td>Images $i</td><td>
<input type=file name='images[]' class='bginput'></td></tr>";
}?>
<a href='#' onclick='increment();'>attach more files</a>
<?php
echo "<tr><td colspan=2 align=center><input type=submit value='Add Image'></td></tr>";
echo "</form> </table>";
?>
Member Avatar for vibhaJ

Here when form submitted you can have $max_no_img value.
max_no_img is text field in this code you can make it hidden.
Try this code.

<script type="text/javascript">

function increment(){

	if(!max_no_img)
	{ var max_no_img = document.getElementById('max_no_img').value; }
	
		max_no_img++;
		document.getElementById('max_no_img').value = max_no_img;
		return max_no_img;
	
}
</script>

<?
$max_no_img=2; // Maximum number of images value to be set here
echo "<form method=post action=addimgck.php enctype='multipart/form-data'>
<input type=\"text\" value=\"".$max_no_img."\" name=\"max_no_img\" id=\"max_no_img\" />";
echo "<table border='0' width='400' cellspacing='0' cellpadding='0' align=center>";
for($i=1; $i<=$max_no_img; $i++){
echo "<tr><td>Images $i</td><td>
<input type=file name='images[]' class='bginput'></td></tr>";
}?>
<a href='#' onclick='increment();'>attach more files</a>
<?php
echo "<tr><td colspan=2 align=center><input type=submit value='Add Image'></td></tr>";
echo "</form> </table>";
?>
Member Avatar for anony

Thank you vibhadevit.
But i want to use that value of max_no_img in the form below.
So that more files can be uploaded.

Member Avatar for anony

Thank you vibhadevit.
But i want to use that value of max_no_img in the form below.
So that more files can be uploaded.

Member Avatar for vibhaJ

Okay. try above code i have posted.

Member Avatar for rajarajan2017

You can directly fetch the details inside js.

<script type="text/javascript">
var max_no_img = <?php echo $max_no_img; ?>;
function increment(){
max_no_img++;
alert('max_no_img : '+max_no_img);
return max_no_img;
}
</script>
Edited by rajarajan2017 because: n/a
Member Avatar for anony

It will display the incremented value in the text box.
But i dont think the for loop is beng executed, because there are only two text boxes for file upload.

Member Avatar for rajarajan2017

Better you neglect the javascript function and call a php function onClick and no need for any increments, just add the

echo "<tr><td>Images $max_no_img++;</td><td><input type=file name='images[]' class='bginput'></td></tr>";
Member Avatar for anony

thank you RajaRajan. R.
But no luck. its not working.

Member Avatar for anony

Thank you so much RajaRajan. R. and Vibhadevit for your ideas.
Its working now.

Member Avatar for vibhaJ

Okay.. gr8

Edited by vibhaJ because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.