基本上,我使用的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>',
我实际上不知道他们如何称呼这个功能,虽然如果有这方面经验的人能指出我如何能够实现我的要求,我将非常感激
答案 0 :(得分:2)
您需要使用所需的标记提供fileTemplate
选项的备用版本。您还需要设置listElement
选项以指向文件项的容器。目前,文件列表是包含在无序列表中的一组列表项。您需要将listElement
设置为<tbody>
,每个文件项(由fileTemplate
选项表示)为<tr>
。
在styling Fine Uploader文档中更详细地描述了在FineUploader模式下设置上传器的样式。另一个选择是使用FineUploaderBasic mode,它仍然可以为您处理跨浏览器上传,但允许您轻松定义自己的UI。