FineUploader : 在模板标记中添加上传按钮

Question

使用 fineUploader jQuery 插件，我试图在我的 fineUploader 模板中添加几个上传按钮。

但似乎 extraButtons 选项不查找模板内的元素，仅在 DOM 内查找元素，然后才将模板添加到 DOM。

http://docs.fineuploader.com/features/extra-buttons.html

因此，如果 extraButtons 元素在模板内，fineUploader 不会找到它们。

我不想在我的模板外添加我的按钮...fineUploader 可以在模板内定位 extraButtons 吗？

我的 fineUploader 实例如下所示：

$("#fine-uploader").fineUploader({
        debug : true,
        extraButtons: [
            {element: $('#upload-pictures-btn1')},
            {element: $('#upload-pictures-btn2')},
            {element: $('#upload-pictures-btn3')}
        ],
        request: {
            endpoint: '/publish/upload'
        }
    });

我的 fineUploader 模板如下所示：

<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 class="qq-upload-drop-area-text-selector"></span>
    </div>
    <div class="qq-upload-button-selector qq-upload-button">
        Add file
    </div>

    <div class="upload-pictures-btns">
        <div id="upload-pictures-btn1"></div>
        <div id="upload-pictures-btn2"></div>
        <div id="upload-pictures-btn3"></div>
    </div>

    <span class="qq-drop-processing-selector qq-drop-processing">
        <span>Uploading ...</span>
        <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
    </span>
    <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
        <li>
            <div class="qq-progress-bar-container-selector">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
            </div>

            <span class="qq-upload-thumb">
                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                <img class="qq-thumbnail-selector" qq-max-size="365" qq-server-scale>
            </span>

            <span class="qq-upload-info">
                <span class="qq-upload-file-selector qq-upload-file"></span>
                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                <span class="qq-upload-size-selector qq-upload-size"></span>
            </span>

            <span class="qq-btns-wrapper">
                <button type="button" class="btn qq-btn qq-upload-cancel-selector qq-upload-cancel">Annuler</button>
                <button type="button" class="btn qq-btn qq-upload-retry-selector qq-upload-retry">Re-essayer</button>
                <button type="button" class="btn qq-btn qq-upload-delete-selector qq-upload-delete">Supprimer</button>
            </span>

            <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
        </li>
    </ul>

</div>

实例化时的 JS 错误：Uncaught TypeError: Cannot read property 'style' of undefined

如果我将 3 个额外的按钮移出模板，并将它们直接放在我的 HTML 标记中，它就可以工作。但我需要它们在模板中。

Answer 1

一个问题与您的代码有关。在 Fine Uploader 初始化之前，您正在从 DOM 中选择元素。当然，在创建 Fine Uploader 实例之前，这些元素还不存在，因为您已经在模板中定义了它们。

目前，在设置 extraButton 选项时，您必须将 Element 传递给 Fine Uploader，但是有一次 an open proposal to make this a bit more flexible. In the meantime one possible workaround involves creating your own <input type="file"> and then submitting it to Fine Uploader via the API用户选择一个或多个文件。例如：

<input type="file" name="extraButton">
<script>
document.querySelector('input[name="extraButton"]').addEventListener('change', function(event) {
   uploader.addFiles(event.target);
});
</script>

FineUploader : 在模板标记中添加上传按钮

FineUploader : add upload buttons in template markup

jquery

fine-uploader