Change the input value via jQuery when image uploaded [uploadify]

Question

I am using uploadify, everything works but i want to change my hidden input value to uploaded filename once it gets uploaded. There are 5 image, i am uploading at a time, and i want to append them one after one.

<input type="file" id="file_upload" name="file_upload" />
<input type="hidden" name="image1" id="image1" />
<input type="hidden" name="image2" id="image5" />
<input type="hidden" name="image3" id="image3" />
<input type="hidden" name="image4" id="image4" />
<input type="hidden" name="image5" id="image5" />

and this is my uploadify script :-

<?php $timestamp = time();?>
            $(function() {
            $('#file_upload').uploadifive({
            'auto'             : false,
            'multi'             : true,
            'fileType'     : 'image',
            'queueSizeLimit' : 5,
            'formData'         : {
                   'timestamp' : '<?php echo $timestamp;?>',
            'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
            },
            'queueID'          : 'queue',
            'uploadScript'     : 'uploadifive.php',
            'onUploadComplete' : function(file, data) { 
alert('The File ' + file.name + " has been uploaded");}
        });
});

Once upload has completed, I want to change all hidden input field with respective images name.

something like :- $("$image1").attr('src', file.name);

but one by one to all ? How can i do them.

Thanks

Answer 1

You could use the .appendTo() or .html() in jQuery, so instead of having the hidden values above, use a div and append to the div as they load...

<div id="images"></aid>

build your html..

$("#images").html('<img src="' + file.name+ '" />');

...or...

$("#images").appendTo('<img src="' + file.name+ '" />');