如何使用JavaScript将文件上载路径附加到表单？

Question

Below is some jQuery/JavaScript code I have that handles file uploads on a Form I have. The user can upload as many files as they need to, after they upload a file, I show a preview image of the uploaded file in a Div.

What I need help with, is I need to somehow add the files that are uploaded, to a hidden form field so when they submit the Form, it will post the file name/path of each file that was uploaded with the other Form data to my backend PHP script.

I'm just not sure on the best way to do this?

I was thinking something like this might work...

<input type="text" name="uploads[]" id="uploads" value="FILE PATH HERE">

But i'm not sure if this would overwrite previous values each time a new file was added if there is more then 1 upload?

Any ideas on how to handle this? All I really need is to access the filename of each uploaded file in the backend once the Form is submitted.

jQuery(function () {
    jQuery('#fileupload').fileupload({
        url: '<?php echo Mage::getUrl('signwizard/index/saveFile') ?>',
        sequentialUploads: true,
        dataType: 'json',
        dropZone: jQuery('#dropzone'),
        pasteZone: jQuery(document),
        autoUpload: true,

        done: function (e, data) {
            jQuery.each(data.result.files, function (index, file) {
                jQuery('<div/>').html('<img src="/channelUploads/thumbnail/'+file.name+'"> '+file.name).appendTo(jQuery('#imageContainer'));


                // Add Uploaded image path and name to a Form field so thatr the file path will be posted when the Form is submitted.....

            });
        }
    });
});

Answer 1

To elaborate on my comment, as long as you append a new input for each file, you are good to go:

done: function (e, data) {
    jQuery.each(data.result.files, function (index, file) {
         jQuery('<div/>').html('<img src="/channelUploads/thumbnail/'+file.name+'"> '+file.name).appendTo(jQuery('#imageContainer'));

         jQuery('#yourformid').append('input type="hidden" name="uploads[]" value="'+file.name+'">');

     });
}