我在使用精细上传程序时出现在我的Javascript调试控制台中出现“无法在模板中找到文件列表容器”的消息。
以下是发生问题的jsfiddle示例。 http://jsfiddle.net/Lu82ba9L/1/
此处重复示例中的代码
<!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js -->
$(document).ready(function () {
$("#fine-uploader").fineUploader({
debug: true,
template: 'qq-template-bootstrap',
request: {
endpoint: "/my-endpoint"
}
});
});
<script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector">
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-button-selector qq-upload-drop-area-selector drag-drop-area">
<div>Drag and drop files here or click to upload</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-list-selector" >
<div class="panel panel-default" >
<div class="panel-body" >
<div class="qq-progress-bar-container-selector progress">
<div class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" />
</div><!-- close panel-body -->
</div><!-- close panel -->
</div>
</div>
</div>
</script>
<h1>Fine Uploader Test</h1>
<div id="fine-uploader"></div>
只是为了获得可能有用的其他信息,我在这里有一个工作版本。 http://jsfiddle.net/61motjed/2/。在这个版本中,我将“div.qq-upload-list-selector”元素移动到DOM中的不同位置(但是,这不是我想要的DOM结构)。我也不清楚为什么第一个例子失败但第二个例子正在运作。
答案 0 :(得分:0)
您的模板无效。模板必须包含一个顶级元素,其CSS类为&#34; qq-uploader-selector&#34;。此元素必须包含模板中的所有其他元素。只需将模板内容包装在此类的元素中即可解决您的问题。