5

RailsアプリケーションでBlueimpjQueryFileUploadを使用しました。ユーザーがファイルを選択するときに、サーバーにファイルをアップロードする前に、画像のサムネイルと画像の名前を表示したいと思います。

私はこのプラグインをカスタマイズするためにデモを参照しています。画面にファイル名を印刷できますが、サムネイルを表示できません。

これが生成された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>あり、その中に私のアプリケーションにない要素があることです。

構成に問題があるようです。ユーザーがディスクから画像を選択するとすぐにサムネイルが表示されるように正しく構成するのを手伝ってくれませんか？

4

3 に答える 3

39

これをadd（e、data）コールバック関数内に配置し、それに応じて独自のhtml要素を調整します。

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

URL.createObjectURL関数はここに記載されています。

于 2013-08-17T02:58:27.177 に答える
3

これらのプレビューは、基本バージョンの一部ではありません。これらは、「完全なユーザーインターフェイス（jquery.fileupload-ui.js）を提供する追加のプラグイン」の一部です。

したがって、これらのjsファイルを含める必要があり、おそらくいくつかのHTMLラッパーが必要です。

デモに含まれているので、デモのソースHTMLを確認してください。

于 2012-06-13T14:19:58.437 に答える
0

ファイル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-14T02:47:52.677 に答える