Question

I’m building a site (in php) that uses uploadify to allow a user to upload portfolio images.

I have uploadify working fine, but I’m just wondering the best way of showing the uploaded images on the page once they have been uploaded. Is it possible to do without a page refresh?

I’ve pasted my uploadify code below:

<script>
    <?php $timestamp = time();?>
        var counter = 1;
        $(function() {
            $('#file_upload').uploadifive({ 
            onUploadComplete: function(event, queueID, fileObj, reponse, data) {
                //alert(counter);
                counter = counter +1 ;
                     },
                'buttonText'   : 'Upload Images...',
                'uploadLimit'  : 12,
                'uploadScript' : '/includes/uploadifive.php',
                'checkScript'  : '/includes/check-exists.php',
                'auto'         : true,
                'method'       : 'post',
                formData     : { 
                    'page_id' : '<? echo $pageDetails->row['page_id'] ?>',
                    'counter'    : counter,
                    'timestamp'  : '<? echo $timestamp;?>',
                    'token'      : '<? echo md5('unique_salt' . $timestamp);?>'
                 },


            });
        });
        </script>

I’m not too sure how to get the file name from uploadify

Answer 1

Sure, you can just add img elements to the page dynamically via the DOM:

var img = document.createElement('img');
img.src = "/path/to/the/new/img.png";
document.getElementById("somecontainer").appendChild(img);

Live Example | Source

You may need to do an ajax call to the server to get the path of the new image, unless that falls out naturally from your application logic.