0

基本的に、私が使用しているjQueryプラグインは次のとおりです: http://fineuploader.com/

アップローダ テンプレートの HTML モックアップは次のとおりです。

<div class="span9">
      <h2>Upload file</h2>
      <div id="bootstrapped-fine-uploader">
        <noscript>
                <p>Please enable JavaScript to use file uploader.</p>
        </noscript>
       </div>
</div>
<div class="span9" style="padding-top:50px;">
       <table class="table table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>Filename</th>
                        <th>Filesize</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                      <tr>
                         <td colspan="3">No active uploads</td>
                      </tr>
                 </tbody>
       </table>
</div>

私ができるようにしたいのは、ある種のアラートであるデフォルトの代わりに別のテーブル行にファイルリストを追加することです。彼らがこれに使用するモックアップは

    template: '<div class="qq-uploader">' +
        ((!this._options.dragAndDrop || !this._options.dragAndDrop.disableDefaultDropzone) ? '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' : '') +
        (!this._options.button ? '<div class="qq-upload-button"><div>{uploadButtonText}</div></div>' : '') +
        '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
        (!this._options.listElement ? '<ul class="qq-upload-list"></ul>' : '') +
        '</div>',

    // template for one item in file list
    fileTemplate: '<li>' +
        '<div class="qq-progress-bar"></div>' +
        '<span class="qq-upload-spinner"></span>' +
        '<span class="qq-upload-finished"></span>' +
        '<span class="qq-upload-file"></span>' +
        '<span class="qq-upload-size"></span>' +
        '<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
        '<a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
        '<a class="qq-upload-delete" href="#">{deleteButtonText}</a>' +
        '<span class="qq-upload-status-text">{statusText}</span>' +
        '</li>',

彼らがこの関数をどのように呼んでいるかは実際にはわかりませんが、このアプリケーションの経験がある人が私の要求を達成する方法について正しい方向に向けることができれば、とても感謝しています.

4

1 に答える 1

2

fileTemplate希望するマークアップを使用して、オプションの代替バージョンを提供することをお勧めします。listElementまた、ファイル アイテムのコンテナーを指すようにオプションを設定する必要があります。現在、ファイル リストは、順序付けられていないリストに含まれるリスト アイテムのセットです。各ファイル項目 (オプションで表される) をlistElementとして設定する必要があります。 <tbody>fileTemplate<tr>

FineUploader モードでのアップローダのスタイリングについては、 Fine Uploader のスタイリングに関するドキュメントで詳しく説明されています。もう 1 つのオプションは、FineUploaderBasic モードを使用することです。これは、クロスブラウザーのアップロードを処理しますが、独自の UI を簡単に定義できます。

于 2013-04-02T13:23:46.250 に答える