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

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

我一直在参考demo来定制这个插件。我能够在屏幕上打印文件的名称，但无法显示缩略图。

这里是生成的html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Fileupload</title> 
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/jquery.fileupload-ui.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.tmpl.js?body=1" type="text/javascript"></script> 
<script src="/assets/load-image.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/canvas-to-blob.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.fileupload.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.fileupload-fp.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.fileupload-ui.js?body=1" type="text/javascript"></script> 
<meta content="authenticity_token" name="csrf-param" /> 
<meta content="Akp8GLPQ+DlFYI1g3CUA71hk0vg3G84aVwcVRHTlRUY=" name="csrf-token" /> 
</head> 
<body> 
<div class="files"> 
    <form action="/users" class="upload" id="fileupload" method="post"> 
    <input id="user_photo" name="user[photo]" type="file" /> 
    <div>Upload files</div> 
    </form> 

    <table class="upload_files"></table> 
</div> 
<!-- The template to display files available for upload --> 
<script id="template-upload" type="text/x-jquery-tmpl"> 
    <tr class="template-upload fade"> 
    <td class="preview"><span class="fade"></span></td> 
    <td class="name"><span>${name}</span></td> 
    </tr> 
</script> 
<script type="text/javascript" charset="utf-8"> 
    $(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('<tr><td>'+ result +'</td></tr>'); 
         }); 
      }, 
      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'); 
       }); 


    }); 
</script> 
</body> 
</html>

我比较选择文件后生成的HTML。唯一的区别是演示应用程序在<td class="preview"><span class="fade"></span></td>内有<canvas height="72" width="80"></canvas>元素，这在我的应用程序中缺失。

它看起来像一些配置问题。任何人都请帮助我正确地配置它，以便在用户从磁盘选择图像后立即显示缩略图？

来源

2012-06-10 Amit Patel

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

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

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

来源

2012-06-13 14:19:58

感谢。我使用jquery.fileupload-ui.js并稍微调整以符合我的要求。谢谢。一旦状态良好，我将在github上分享演示应用程序。 –

将这个外接内（即数据）的回调函数，调整相应自己的HTML元素：

$('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '"/>');

的URL.createObjectURL功能是记录here。

来源

2013-08-17 02:58:27 Dwayne

这工作无需包含任何额外的文件，谢谢 – evilcelery

非常感谢，这就是我一直在寻找。我仍然不明白为什么修改添加触发器会删除预览功能。 –

感谢这个不错的解决方案。这个选项的浏览器要求是什么？ –

文件jquery.fileupload-ui.js编辑功能_renderPreviews

_renderPreviews: function (data) {   
     data.context.find('.preview').each(function (index, elm) {    
      $(elm).append(data.files[index].preview); 
      $(elm).append('<img width="90" src="' + URL.createObjectURL(data.files[0]) + '"/>'); 
     }); 
    },

来源

2016-07-14 02:47:52

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

回答

相关问题