使用fineUploader </li>附加到表而不是<li>

时间:2013-04-02 05:55:22

标签: javascript html fine-uploader

基本上,我使用的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>',

我实际上不知道他们如何称呼这个功能,虽然如果有这方面经验的人能指出我如何能够实现我的要求,我将非常感激

1 个答案:

答案 0 :(得分:2)

您需要使用所需的标记提供fileTemplate选项的备用版本。您还需要设置listElement选项以指向文件项的容器。目前,文件列表是包含在无序列表中的一组列表项。您需要将listElement设置为<tbody>,每个文件项(由fileTemplate选项表示)为<tr>

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