Upload file without page refresh

Question

I have written a little jQuery in order to be able to upload a picture with no page refresh, but when I upload the picture, I must refresh the page in oder for the new image to appear. I am sure it is something wrong with my jQuery script:

        var uploader = new qq.FileUploaderBasic({
        button: $('#account #picture .header')[0],
        action: '<?= Route::url('Account Upload Avatar'); ?>',
        allowedExtensions: ['png', 'jpg', 'gif'],
        onSubmit: function()
        {
        },
        onComplete: function(id, fileName, avatar)
        {
            $('#loader').hide();
            $('#picture img').attr('src', avatar.url + '?' + (new Date).getTime());
        }
    });
});

I know that this is not exactly what you want, but it exists a great plugin for JQuery called Uploadify that can help you http://www.uploadify.com/ — Fran Verona, May 10 '11 at 11:46
Check out http://www.zurb.com/playground/ajax_upload - their plugin does exactly what you are trying to do, and they have example code to demonstrate the onComplete event. — Dave Kiss, May 10 '11 at 12:03
Have you checked that it is your code having the issue and it's not a caching one? Sometimes appending the url can fail to return the newer file as you would expect. — Justin Wignall, May 10 '11 at 12:03

score 1 · Accepted Answer · answered May 10 '11 at 12:55

I was going to edit the post to clean it up, but then I realized that you had an unmatched set of brackets; this would cause any browser that the javascript is loaded into to not execute it (whether or not you would be told of it is a different story).

The code should look like this:

var uploader = new qq.FileUploaderBasic({
button: $('#account #picture .header')[0],
action: '<?= Route::url('Account Upload Avatar'); ?>',
allowedExtensions: ['png', 'jpg', 'gif'],
onSubmit: function()
{
},
onComplete: function(id, fileName, avatar)
{
    $('#loader').hide();
    $('#picture img').attr('src', avatar.url + '?' + (new Date).getTime());
}
});

Note the }); left out at the end.

@dana: You should take care to use correct code as your example, otherwise, people will not be able to try and replicate the problem and give you a solution. You should edit your code sample to be correct. — casperOne, May 10 '11 at 13:26

Upload file without page refresh

1 Answers1