Jquery FineUploader:在模板标记中添加上载按钮
使用fineUploader jQuery插件,我试图在fineUploader模板中添加几个上传按钮 但是,在将模板添加到DOM之前,Jquery FineUploader:在模板标记中添加上载按钮,jquery,fine-uploader,Jquery,Fine Uploader,使用fineUploader jQuery插件,我试图在fineUploader模板中添加几个上传按钮 但是,在将模板添加到DOM之前,extraButtons选项似乎不在模板内查找元素,只在DOM内查找 因此,如果extraButtons元素在模板内,fineUploader将找不到它们 我不想在模板外添加按钮。。。fineUploader能否在模板中定位额外按钮 我的fineUploader实例如下所示: $("#fine-uploader").fineUploader({
extraButtons
选项似乎不在模板内查找元素,只在DOM内查找
因此,如果extraButtons元素在模板内,fineUploader将找不到它们
我不想在模板外添加按钮。。。fineUploader能否在模板中定位额外按钮
我的fineUploader实例如下所示:
$("#fine-uploader").fineUploader({
debug : true,
extraButtons: [
{element: $('#upload-pictures-btn1')},
{element: $('#upload-pictures-btn2')},
{element: $('#upload-pictures-btn3')}
],
request: {
endpoint: '/publish/upload'
}
});
<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>
我的fineUploader模板如下所示:
$("#fine-uploader").fineUploader({
debug : true,
extraButtons: [
{element: $('#upload-pictures-btn1')},
{element: $('#upload-pictures-btn2')},
{element: $('#upload-pictures-btn3')}
],
request: {
endpoint: '/publish/upload'
}
});
<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错误:未捕获类型错误:无法读取未定义的属性“style”
如果我将3个额外的按钮移出模板,并将它们直接放在我的HTML标记中,它就会起作用。但是我需要它们在模板中。一个问题是您的代码。在Fine Uploader初始化之前,您正在从DOM中选择元素。当然,在创建Fine Uploader实例之前,这些元素还不存在,因为您已经在模板中定义了它们 当前,在设置
extraButton
选项时,您必须将元素
传递给Fine Uploader,但确实存在。同时,一种可能的解决方法是创建自己的
,然后用户选择一个或多个文件。例如:
<input type="file" name="extraButton">
<script>
document.querySelector('input[name="extraButton"]').addEventListener('change', function(event) {
uploader.addFiles(event.target);
});
</script>
document.querySelector('input[name=“extraButton”]”)。addEventListener('change',函数(事件){
uploader.addFiles(event.target);
});
请显示您的代码。添加了代码详细信息和JS错误。我知道fineUploader找不到元素,因为模板尚未添加到DOM中。但我如何“传递每个元素的id并允许Fine Uploader为我选择它们”?这是fineUploader的一个功能吗?Thanx.没有为每个额外的按钮选项提供jquery对象,而是提供每个按钮的id。我尝试了{element:“upload-pictures-btn1”}
和{element:#upload-pictures-btn1”}
两种方法,但我出现了以下错误:未捕获错误:[Fine Uploader 5.3.2]无法将样式应用于节点,因为它不在HtmleElement原型链上代码>听起来像是代码中其他地方的问题。开发工具可能会很好地指出问题所在。请在我提到的GitHub案例中说明您的愿望。