jQuery File Upload preview image

Question

I am using jQuery File Upload plugin (http://blueimp.github.io/jQuery-File-Upload/) for image upload for my website. I have look through (https://github.com/blueimp/jQuery-File-Upload/wiki/Options), but I didn't find the setting to assign an element to display the image. So, how can I preview the image on the webpage with this plugin?

Thank you.

Answer 1

I don't think that the Jquery File Upload plugin provides preview functionality.

But you can easily implement it into the plugin's add option:

add: function (e, data) {
    if (data.files && data.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#target').attr('src', e.target.result);
        }
        reader.readAsDataURL(data.files[0]);
        ...
        data.submit();
    }
}

Live exemple without BlueImp plugin.