如何使用Dropzone.js在预览中使用实际图像而不是缩略图

Question

上传后,文件的缩略图会显示,因为最终只会上传GIF,如何在预览中显示实际的gif,而不是png缩略图？看到它在其他地方完成,但我认为需要编辑dropzone.js,有没有人在这里完成这个并可以告诉我如何？

谢谢!!

Answer 1

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

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 );
});

希望这能解决你的目的.