html5 multi image upload show more than just image preview

html5 multi image upload show more than just image preview

I'm currently playing around with html5 image upload. When I upload an
image as part of a form there are also text inputs for the user to rename
the file and add other info. This gets uploaded to MySQL via php. This is
a sample form, the '$i' is used in php to add a number for each image.
Currently I have to select how many images will be uploaded first, and
that generates the below form with that many upload boxes.
Image '.$i.':<output id="display'.$i.'" ></output>
Choose Image:
<input name="file'.$i.'" type="file" id="file'.$i.'" class="upFile"
accept="image/*" />
Ride:
<select name="ride_id_image'.$i.'">
<option value="">Select Ride</option>
'.$options.'
</select>
Description:
<input type="text" size="'.$textbox.'" name="alt'.$i.'">
Credit:
<input type="text" size="'.$textbox.'" name="credit'.$i.'"><input
type="checkbox" name="flickr'.$i.'" value="FlickR: ">FlickR?
Now I know using javascript and html5 API you can generate an image
preview for each image of a multi-upload. What I am wondering is, is it
possible to have just one upload box, select lets say 5 files, then 5
image previews appear each with the text inputs for 'ride', 'description',
'credit' for each image to add the MySQL data?
I am completly new to Javascript so clueless as to if it can be done and
how. Thanks for any help
Extra info: Below is the API code I am trying to adapt, its from
html5rocks and using one upload box to show multiple image previews.
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name),
'"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change',
handleFileSelect, false);
</script>