0

基本上，我使用的 jQuery 插件是：http: //fineuploader.com/

我的上传模板的 HTML Mockup 如下

<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>.

样式化Fine Uploader文档中详细描述了在 FineUploader 模式下设置上传器样式。另一种选择是使用FineUploaderBasic 模式，它仍然为您处理跨浏览器上传，但允许您轻松定义自己的 UI。

于 2013-04-02T13:23:46.250 回答