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

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

我一直提到的演示来定制这个插件。我能够在屏幕上打印的文件的名称，但不能显示缩略图。

下面是生成的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。唯一的区别是演示应用程序<canvas height="72" width="80"></canvas>元素内<td class="preview"><span class="fade"></span></td>这是在缺少我的应用程序。

它看起来像一些配置问题。会有人请帮我配置得当尽快用户从磁盘中选择图像显示缩略图？

Answer 1:

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

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

查看演示的HTML源文件，因为它是包含在演示。

Answer 2:

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

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

该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('<img width="90" src="' + URL.createObjectURL(data.files[0]) + '"/>');
        });
    },