Blueimp Jquery文件上传：不显示缩略图预览图像

我在我的Rails应用程序中使用了Blueimp jQuery File Upload 。 当用户选择文件时，我想在将文件上传到服务器之前显示图像的缩略图和图像的名称。

我一直在引用该演示来自定义这个插件。 我能够在屏幕上打印文件的名称，但无法显示缩略图。

这是生成的html

                    
 
  
Upload files
 
  
     ${name}    $(function () { $('#fileupload').fileupload({ add: function (e, data) { console.log('add'); $.each(data.files, function (index, file) { console.log('Added file: ' + file.name); //alert($('#tmpl-demo').tmpl(data)); $('#template-upload').tmpl(data.files).appendTo('.upload_files'); }); var jqXHR = data.submit() .success(function (result, textStatus, jqXHR) {/* ... */}) .error(function (jqXHR, textStatus, errorThrown) {/* ... */}) .complete(function (result, textStatus, jqXHR) { console.log("complete"); //$('.upload_files').append(''+ result +''); }); }, progress: function (e, data) { console.log('progress'); }, start: function (e) { console.log('start'); }, done: function (e) { console.log('done'); } }).bind('fileuploadadd', function (e, data) { console.log('fileuploadadd'); }).bind('fileuploadprogress', function (e, data) { console.log('fileuploadprogress'); }).bind('fileuploadstart', function (e) { console.log('fileuploadstart'); }).bind('fileuploaddone', function (e) { console.log('fileuploaddone'); }); });    

我比较选择文件后生成的html。 唯一的区别是演示应用程序在

元素在我的申请中缺少。

它看起来像一些配置问题。 一旦用户从磁盘中选择图像，有人会帮我配置它以显示缩略图吗？

Answer 1

这些预览不是基本版本的一部分。 它们是“ 提供完整用户界面的附加插件（jquery.fileupload-ui.js） ” 的一部分。 “

所以你必须包含那些js文件，你可能需要一些HTML包装器。

查看演示的源HTML，因为它包含在该演示中。

Answer 2

将它放在你的add（e，data）回调函数中，相应地调整你自己的html元素：

 $('body').append(''); 

这里记录了 URL.createObjectURL函数。

Answer 3

在文件jquery.fileupload-ui.js中编辑函数_renderPreviews

 _renderPreviews: function (data) { data.context.find('.preview').each(function (index, elm) { $(elm).append(data.files[index].preview); $(elm).append(''); }); },