How to use actual image in preview instead of thumbnail with Dropzone.js

问题

Once uploaded, a thumbnail of the file shows up, since only gifs will be uploaded eventually, how do i get the actual gif to show in the preview, not a png thumbnail? Seen it done elsewhere but i think requires editing dropzone.js, has anyone done this here and could show me how?

Thanks!!

回答1:

No need to edit dropzone.js. Change its configuraiton. You can use "addedFile" of Dropzone. In addedFile function, you can get the base64 value of all files added to dropzone. Below is the code I used :

this.on("addedfile", function (file) {
     var temp = file.previewTemplate;
     var FR= new FileReader();
     FR.onload = function(e) {
         console.log( e.target.result); //This is the base64 data of file(gif) dropped
         //if you want to display it somewhere in your previewTemplate
         temp.find('.my-preview').attr('src',e.target.result); //setting as src of some img tag with class 'my-preview'
     };
     FR.readAsDataURL( file );
});

hope this solves your purpose.

来源：https://stackoverflow.com/questions/26407310/how-to-use-actual-image-in-preview-instead-of-thumbnail-with-dropzone-js