12

jQueryファイルアップロードデモを使用しようとしています。ウィキとテンプレートエンジンのウィキを検索しましたが、テーブルの行タグを使用せずにアップロード/ダウンロードテンプレートをカスタマイズする方法の答えが見つかりませんでした。テーブルの行タグを削除/変更するたびに機能しません。

ベローは私のカスタマイズしたアップロードテンプレートであり、機能しません。理由はわかりませんが、誰か助けてもらえますか？

uploadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<li class="span3"><div class="thumbnail template-upload">' +
                '<div class="preview"><span></span></div>' +
                '<div class="caption"><h5 class="name"></h5>' +
                '<p class="size"></p>' +
                (file.error ? '<div class="error" colspan="2"></div>' :
                        '<div><div class="progress">' +
                            '<div class="bar" style="width:0%;"></div></div></div>' +
                            '<div class="start"><button>Start</button></div>'
                ) + '<div class="cancel"><button>Cancel</button></div></div></div></li>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.error').text(
                    locale.fileupload.errors[file.error] || file.error
                );
            }
            rows = rows.add(row);
        });
        return rows;
    },
4

2 に答える 2

7

サンプルとライブ デモを見て、この jsbin を作成しました: http://jsbin.com/ivonow/1/

デモのコードです。html の下部にある jQuery テンプレートを取り出し、fileupload オブジェクトのセットアップ時に渡されたオプションに、上から uploadTemplate 関数を追加しました。

デフォルトをロードしようとしないように、uploadTemplateId と downloadTemplateId を null に設定する必要もありました。

{
  uploadTemplateId: null,
  downloadTemplateId: null,
}

HTML で、行テンプレートを囲むテーブルを取り出して UL を追加しましたが、スタイルはまだ変です。

お役に立てれば。

于 2012-11-28T05:09:40.467 に答える
4

まず第一に、アップロードされた画像を削除したい場合は、 template-uploadではなくtemplate-downloadで作業する必要があります。

template-upload は、アップロードされる内容をプレビューするために使用され、アップロードされると、template-download に戻ります。

したがって、あなたのケースで上書きされるテンプレートはtemplate-downloadである必要があります。これを行う方法の良い例がhttps://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engineにあります。

注 1:動的に削除されるノードは、CSS クラスtemplate-downloadの対象になります。したがって、そのクラスをコード内の別の位置に配置する必要があります (私は div を使用しましたが、それは私にとってはうまくいきます)。「フェード」クラスはトランジション効果に使用されます。

ただし、このドキュメントにはいくつかのエラーがあるようです (ドキュメントで報告されていないモジュールのアップグレードによる可能性があります)。

template-download を書き換えるための次のコード抽出は機能しません

row.find('.delete')
    .attr('data-type', file.delete_type)
    .attr('data-url', file.delete_url);

ファイルオブジェクトには、 delete_typeパラメーターもdelete_urlパラメーターもありませんが、 deleteTypeパラメーターとdeleteUrlパラメーターがあるためです。これはJquery File Upload バージョン 8.9.0用です(古いバージョンでも動作する可能性があります)。

そのため、ドキュメントからコードをコピーして貼り付けるだけでは、削除ボタンに正しい値が表示されないため、機能しません。

テンプレートのダウンロードを上書きするときに削除ボタンを機能させる正しいコードは次のとおりです。

row.find('.delete')
    .attr('data-type', file.deleteType)
    .attr('data-url', file.deleteUrl);

私にとっては、次のコードは問題なく機能します。

 $('#fileupload').fileupload({  
    downloadTemplateId: '',
    downloadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $( '<div class="template-download fade"><span class="preview"></span>' +
                (file.error ? '<div class="error"></div>' : '') +
                '<button class="delete">Delete</button></div>');
            //row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.name').text(file.name);
                row.find('.error').text(file.error);
            } else {
               // row.find('.name').append($('<a></a>').text(file.name));
                if (file.thumbnailUrl) {
                    row.find('.preview').append(
                        $('<a></a>').append(
                            $('<img>').prop('src', file.thumbnailUrl)
                        )
                    );
                }
                row.find('a')
                    .attr('data-gallery', '')
                    .prop('href', file.url);
                row.find('.delete')
                    .attr('data-type', file.deleteType)
                    .attr('data-url', file.deleteUrl);
            }
            rows = rows.add(row);
        });
        return rows;
    }
});
于 2013-10-25T17:12:17.880 に答える