【问题标题】:listElement property not behaving as expectedlistElement 属性未按预期运行
【发布时间】:2015-03-02 21:58:56
【问题描述】:

您好在这里创建了我的问题的 JSFiddle。

http://jsfiddle.net/L7o1nct6/2/

我也会在这里重复代码,因为 Stackoverflow 强迫我这样做。

JavaScript

        <!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js -->

    $(document).ready(function()
    {
        $("#fine-uploader").fineUploader({
            listElement: $('#listElement'),
            debug: true,
            template: 'qq-template-bootstrap',
            request: {
                endpoint: "/my-endpoint"
            }

        });

    });

HTML

<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="qq-upload-list-selector" id="#listElement" >
    <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>

</script>
<h1>Fine Uploader Test</h1>
<div id="fine-uploader"></div>

查看 JSFiddle 示例时,如果打开调试控制台,会看到消息“未捕获的错误:无法在模板中找到文件列表容器!”。

我不确定这意味着什么,我想我可以使用 listElement 属性来告诉 Fine-uploader 使用哪个元素用于此列表?

附带说明,如果我剪切并粘贴 id=listElement 的 div 并将其移动到 class=qq-upload-button-selector 的 div 附近,则此示例可以正常工作。

任何帮助都将不胜感激,我已经花了几个小时在 stackoverflow 上也没有找到答案。

【问题讨论】:

    标签: fine-uploader


    【解决方案1】:

    您的代码有几个问题:

    1. “#listelement”不是所有浏览器中的有效 html 元素 ID。
    2. 您正在尝试选择 DOM 中尚不存在的元素。目前尚不清楚您为什么要指定列表元素。精细的上传者在渲染时应该在模板中找到列表。

    【讨论】:

    • 响应第 1 点,我现在使用“list-element”的有效元素 ID,我还将“list-element”div 移出 script 标签并进入 HTML 主体.你可以在这里看到更正的版本jsfiddle.net/L7o1nct6/4。但是我仍然收到相同的错误消息。
    • 针对第 2 点,我创建了一个工作版本,它甚至没有在这里使用 listElement 属性jsfiddle.net/61motjed/2(工作正常)。但是,请在此处查看此稍作修改的版本,其中“qq-upload-list-selector”在dom中的位置不同,jsfiddle.net/Lu82ba9L/1。你会看到这个版本得到了原来的错误。
    • 请用您的新问题创建一个新版本。请不要“修复”您的代码以响应答案,或以 cmets 的身份提出后续问题。
    • 感谢关于我的 stackoverflow 礼仪的建议。我在这里问了后续问题。 stackoverflow.com/questions/28985828/…
    猜你喜欢
    • 2017-07-19
    • 1970-01-01
    • 1970-01-01
    • 2014-04-11
    • 1970-01-01
    • 1970-01-01
    • 2014-11-12
    • 1970-01-01
    相关资源
    最近更新 更多