Hi everyone,
I have made a little script that allows a user to choose how many files they want to upload by making a selection in a <select> box. When they make a selection, the specified number of file imputs are added.
The code is like so:
<form action="uploaded_pics.php" method="post" id="formie" enctype="multipart/form-data">
<select name="numPics" onchange="reload(this.form)">
<option selected value="">Select </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br />
<br />
<SCRIPT language=JavaScript>
function reload(form){
var parent = document.getElementById('formie');
var numPics = form.numPics.options[form.numPics.options.selectedIndex].value;
for (i=1; i <=numPics; i++)
{
var label = document.createElement('LABEL');
label.appendChild(document.createTextNode('Select a photo: '));
var field = document.createElement('INPUT');
field.type = 'file';
field.name = 'ufile[]';
var formField = document.createElement('DIV');
formField.appendChild(label);
formField.appendChild(field);
formField.appendChild(document.createElement('BR'));
parent.appendChild(formField);
}
var submitBtn = document.createElement('INPUT');
submitBtn.type = "submit";
submitBtn.value = "Upload";
parent.appendChild(submitBtn);
}
</script>
</form>
I then am checking the results of this in “uploaded_pics.php” like so:
foreach ($_POST as $key => $value)
{
echo "Key is: " . $key;
echo "Value is: " . $value . "<br />";
}
I’m not 100% sure of exactly what is happening to produce the problem I’m having, but basically even though the file inputs appear in the form as expected, they subsequently don’t show up in the $_POST array on submit.
However, if I remove the line
field.type = 'file';
(and therefore make text inputs), they do show up in the $_POST array.
I’m finding this all a bit mysterious and (frustrating!). I’m happy to admit I’m a total noob at JavaScript, but to me the code I have should do what I’m expecting . . .
I’m hoping someone can shed some light on this! I’ve tried Googling it, but haven’t turned up any results - possibly because I’m not quite sure what I’m even looking for.
Any help would be much appreciated.
Cheers!