将文件列表移动到DOM中的备用位置(fine-Uploader)

Question

我需要你的帮助。

我正在使用fineUploader 4.2.1，并尝试将文件列表重新定位到DOM中的另一个位置( html页面上我们自己的元素)。下面是我实现这一点的代码片段。

--我希望创建文件列表的位置(使用编辑名称手动上载)

<div class="qq-upload-list-container">
    <ul class="qq-upload-list-selector qq-upload-list">
    </ul>
</div>

--我当前的模板

    < script type="text/template" id="qq-template" >
<div class="qq-uploader-selector qq-uploader">
        <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
            <span>Drop files here to upload</span>
        </div>
        <div class="qq-upload-button-selector qq-upload-button qq-btn qq-btn-primary">
            <span>Select Images (Max. 5)</span>
        </div>
        <span class="qq-drop-processing-selector qq-drop-processing">
            <span>Processing dropped files...</span>
            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
        </span>
        <ul class="qq-upload-list-selector qq-upload-list">
            <li>
                <div class="qq-progress-bar-container-selector">
                    <div class="qq-progress-bar-selector qq-progress-bar"></div>
                </div>
                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                <span class="qq-upload-file-selector qq-upload-file"></span>
                <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                <span class="qq-upload-size-selector qq-upload-size"></span>
                <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                <a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
                <a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
                <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
        </ul>
</div>
</ script >

--我的JavaScript代码块。

<script>
$(document).ready(function(){

    var manualuploader = $('#image-selector-fine-uploader').fineUploader({
        listElement: "qq-upload-list-container",
      //template: "qq-simple-thumbnails-template",
      //template: "qq-template-manual-noedit",
      template: "qq-template",
      thumbnails: {
          placeholders: {
            waitingPath: $webroot + "img/waiting-generic.png",
            notAvailablePath: $webroot + "img/not_available-generic.png"
          }
      },
      request: {
        endpoint: $uploadURL
      },
      validation: {
          allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
      },
      editFilename: {
        enabled: true
      },
      autoUpload: false
    });

$('#upload-trigger-fine-uploader').click(function() {
  manualuploader.fineUploader('uploadStoredFiles');
});
});

​

我不确定我哪里搞错了，但是fineUploader没有在DOM“qq-fineUploader- list -container”下创建文件列表。

任何提示都将不胜感激。

-BC

Answer 1

文档的这一部分看起来有几个错误。listElement选项的预期类型应该是HTMLElement，而不是字符串。由于您使用的是jQuery插件包装器，因此jQuery对象也是一种可接受的值类型。

因此，您的listElement选项值应该为$(".qq-upload-list-container");

现在，我将使用文档修复这些问题。