Blueimp Jquery 文件上傳：不顯示縮略圖預覽圖像

Question

我在 Rails 應用程序中使用了Blueimp jQuery File Upload 。 當用戶選擇文件時，我想在將文件上傳到服務器之前顯示圖像的縮略圖和圖像的名稱。

我一直在參考演示來定制這個插件。 我可以在屏幕上打印文件名，但無法顯示縮略圖。

這是生成的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>元素這是我的應用程序中缺少的。

看起來像一些配置問題。 任何人都可以幫助我正確配置它以在用戶從磁盤中選擇圖像后立即顯示縮略圖嗎？

Answer 1

把它放在你的 add(e, data) 回調函數中，相應地調整你自己的 html 元素：

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

URL.createObjectURL 函數記錄在此處。

Answer 2

這些預覽不是基本版本的一部分。 它們是“提供完整用戶界面的附加插件 (jquery.fileupload-ui.js) ”的一部分。

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

查看演示的源 HTML，因為它包含在該演示中。

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]) + '"/>');
        });
    },

Blueimp Jquery 文件上傳：不顯示縮略圖預覽圖像

問題描述

3 個解決方案

解決方案1
38 2013-08-17 02:58:27

解決方案2
3 已采納 2012-06-13 14:19:58

解決方案3
0 2016-07-14 02:47:52

Blueimp Jquery 文件上傳：不顯示縮略圖預覽圖像

問題描述

3 個解決方案

解決方案1 38 2013-08-17 02:58:27

解決方案2 3 已采納 2012-06-13 14:19:58

解決方案3 0 2016-07-14 02:47:52

解決方案1
38 2013-08-17 02:58:27

解決方案2
3 已采納 2012-06-13 14:19:58

解決方案3
0 2016-07-14 02:47:52