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.

Answer 2

The plugin does support image previews though I'm trying to figure out how to resize it to a higher resolution. You can access the preview by doing something like this:

$('.fileupload-field')
  .fileupload({
     disableImageResize: false, 
     previewMaxWidth: 320, 
     previewMaxHeight: 320
  })
  .bind('fileuploadprocessalways', function(e, data)
  {
      var canvas = data.files[0].preview;
      var dataURL = canvas.toDataURL();
      $("#some-image").css("background-image", 'url(' + dataURL +')');

  })

Answer 3

" File reader API is not supported in IE-9, so to preview the image, do the following steps:

1> send the image to the server using ajax>2>Get the image source from the server after uploading as response 3> by using the image source, append it to the preview image tag "