gpt4 book ai didi

jquery - 精细 uploader : add upload buttons in template markup

转载 作者:行者123 更新时间:2023-12-01 03:36:19 27 4
gpt4 key购买 nike

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

但是,在将模板添加到 DOM 之前,extraButtons 选项似乎不会查找模板内的元素,而只会查找 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 错误:未捕获类型错误:无法读取未定义的属性“样式”

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

最佳答案

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

目前,您必须通过 Element设置您的 extraButton 时使用 Fine Uploader选项,但有 an open proposal to make this a bit more flexible 。同时,一种可能的解决方法是创建您自己的 <input type="file">然后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>

关于jquery - 精细 uploader : add upload buttons in template markup,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33457958/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com