“在模板中找不到文件列表容器".错误 [英] "Could not find the file list container in the template" error

问题描述

使用精细上载程序时，我的Javascript调试控制台中显示消息在模板中找不到文件列表容器".

I am getting message "Could not find the file list container in the template" appearing in my Javascript debug console when using fine uploader.

这是发生问题的一个jsfiddle示例. http://jsfiddle.net/Lu82ba9L/1/

Here is a jsfiddle example of the problem occurring. 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结构).我还不清楚为什么第一个示例失败了，而第二个示例仍在工作.

Just for additional information that may be helpful, I have a working version here. http://jsfiddle.net/61motjed/2/ .In this version here I have moved the "div.qq-upload-list-selector" element to a different position in the DOM (however, this is not the DOM structure I want). It is also unclear to me why the first example fails but the 2nd example is working.

推荐答案

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

Your template is not valid. The template must contain a top-level element with a CSS class of "qq-uploader-selector". This element must contain all other elements in your template. Simply wrapping the contents of your template in an element with this class should fix your issue.

这篇关于“在模板中找不到文件列表容器".错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！