2015-03-02 48 views
0

您好在这里创建了一个JSFiddle我的问题。listElement属性没有像预期的那样运行

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

我也将在这里重复代码#1被强迫我做的。

的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为id = listElement的div,并将其与class = qq-upload-button-selector相邻的div移动,则此示例正常。

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

回答

0

一对夫妇的问题与您的代码:

  1. “#listelement” 是不是在所有浏览器有效的HTML元素的ID。
  2. 您正试图选择DOM中尚不存在的元素。不清楚为什么你要指定一个列表元素。上传者应该在模板呈现时找到该列表。
+0

为了回应第1点,我现在使用了一个有效的元素ID“list-element”,我也将“list-element”div从脚本标记中移出并放入主HTML主体中。你可以在这里看到更正版本http://jsfiddle.net/L7o1nct6/4/。但是我仍然收到相同的错误信息。 – Sam 2015-03-03 03:35:54

+0

为了回应第2点,我创建了一个工作版本,甚至没有使用这里的listElement属性http://jsfiddle.net/61motjed/2/(Works罚款)。不过,请在这里稍微修改一下这个版本,“qq-upload-list-selector”在dom中的位置不同,http://jsfiddle.net/Lu82ba9L/1/。你会看到这个版本得到了最初的错误。 – Sam 2015-03-03 03:45:01

+0

请用新的问题创建新的版本。请不要“回答”您的代码以回答问题,或者以后续问题的形式提出意见。 – 2015-03-10 14:23:59

相关问题