如何使用Dropzone.js在预览中使用实际图像而不是缩略图 [英] How to use actual image in preview instead of thumbnail with Dropzone.js

问题描述

一旦上传，文件的缩略图就会显示出来，因为最终只会上传gif，我如何才能在预览中显示实际的gif，而不是png缩略图?看到它在其他地方完成了，但我认为需要编辑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?

谢谢！

推荐答案

无需编辑dropzone.js.更改其配置. 您可以使用Dropzone的"addedFile".在addedFile函数中，您可以获得添加到dropzone的所有文件的base64值.以下是我使用的代码:

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.

这篇关于如何使用Dropzone.js在预览中使用实际图像而不是缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！