"Could not find the file list container in the template" 错误

Question

我在使用 fine 上传器时收到消息 "Could not find the file list container in the template" 出现在我的 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 结构）。我也不清楚为什么第一个示例失败但第二个示例有效。

Answer 1

您的模板无效。模板必须包含 CSS class 为 "qq-uploader-selector" 的顶级元素。此元素必须包含模板中的所有其他元素。只需使用此 class 将模板的内容包装在一个元素中即可解决您的问题。

"Could not find the file list container in the template" 错误

"Could not find the file list container in the template" error

fine-uploader