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.

Recommended Answers

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 …
Jump to Post

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 …
Jump to Post

Okay. try above code i have posted.

Jump to Post

All 11 Replies

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>";
?>

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>";
?>

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.

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.

Okay. try above code i have posted.

Member Avatar

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>

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

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

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

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

Okay.. gr8

Be a part of the DaniWeb community

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