jqueryjquery-file-upload

jQuery File Upload preview image


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.


Solution

  • 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 example without BlueImp plugin.