jQuery File Upload preview image

15
votes

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.

3
jqueryjquery-file-upload
Did u tried anything..? if yes add the fiddle to understand better. – Neha
Nope. I was looking for working example, but couldn't find one. I also couldn't find the setting for doing image preview from the document. – user1995781

3 Answers

47
votes

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.

9
votes

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 +')');

  })
1
votes

" 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 "