Multiple file uploads

[Ninjakreborn]

I currently have 4 upload slots (input fields) for files.  I want to be able to hide 3 of them and only show one.  Once you click on the first one and choose a file, I want the second one

to appear.  When you pick that, I want the third one to appear. When you pick that I want the final one to appear, up to a maximum of just teh four. However, later I might be adding more file upload areas and need those to work as well.

 

Is there an easy way to do this in Javascript?

[PFMaBiSmAd]

Is there an easy way to do this in Javascript?

Yes -

<script type="text/javascript">
function add_field(){
var max = 4; // total number of file fields
var cont = document.getElementById('addhere'); // refer to the div
var numfields = cont.getElementsByTagName("input").length; // get number of input fields in the div
if(numfields < max){
	// create a div element
	var div1 = document.createElement('div');
	// Get template data
	div1.innerHTML = document.getElementById('fieldtpl').innerHTML;
	// append to div, so that template data becomes part of document
	document.getElementById('addhere').appendChild(div1);
}
}
</script>

<form method="post" action="formaction.php" enctype="multipart/form-data" >
    <div id="addhere">
	<input type="file" name="upload[]" value="" size="50" onchange="add_field();" >
</div>
<input type="submit">
</form>
<!-- Template. This whole data will be added directly to working div above -->  
<div id="fieldtpl" style="display:none">
<input type="file" name="upload[]" value="" size="50" onchange="add_field();" >
</div>