Question

使用精细上传器插件，我试图添加多个（动态可能是1或10个）实例，每个部分都有一个可选的标题字段和一个手动上传按钮。

我上传的表单是在布局和内容中动态生成的，上传的文件必须由处理程序根据表单的部分以及精细上传器的实例进行存储。我还需要能够独立地有效上传每个精细上传器的实例

我遇到的问题是遵循指南＆amp;手动上传选项的演示，即添加点击功能，它将始终只找到第一个实例，因为它使用.getElementById搜索按钮。

我可以通过为每个实例定义一个新模板来解决这个问题，但我更愿意使用单个模板。

模板代码（对于每个实例 - 为简单起见而缩写）是

<script type="text/template" id="qq-template-manual-trigger#XX#">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
...
    <div class="buttons">
        <div class="qq-upload-button-selector qq-upload-button">
            <div>Select files</div>
        </div>
        <button type="button" id="trigger-upload#XX#" class="btn btn-primary">
            <i class="icon-upload icon-white"></i> Upload
        </button>
    </div>
...
    <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
        <li>
...
            <input class="caption" tabindex="1" type="text">
...
        </li>
    </ul>
...
</div>
</script>
<div id="fine-uploader-manual-trigger#XX#"></div>

和上传脚本

<script>
var manualUploader#XX# = new qq.FineUploader({
        element: document.getElementById('fine-uploader-manual-trigger#XX#'),
        template: 'qq-template-manual-trigger#XX#',
        request: {
            inputName: "imagegroup[]",
            endpoint: '/SaveFile.aspx'
        },

        autoUpload: false,
        debug: true,
        callbacks: {
    onError: function(id, name, errorReason, xhrOrXdr) {
        alert(qq.format("Error on file number {} - {}.  Reason: {}", id, name, errorReason));
    },
    onUpload: function (id) {
                var fileContainer = this.getItemByFileId(id)
                var captionInput = fileContainer.querySelector('.caption')
                var captionText = captionInput.value

                this.setParams({
                    "descr[]": captionText,
                    <-- Other parameters here -->
                }, id)
            }
        },
    });


    qq(document.getElementById("trigger-upload#XX#")).attach("click", function () {
        manualUploader#XX#.uploadStoredFiles();
    });

</script>

在理想世界中我宁愿只有一个

<script  type="text/template" id="qq-template-manual-trigger">
....
</script>

然后通过表单多次需要

<div id="fine-uploader-manual-trigger"></div>
<script>
var manualUploader#XX# = new qq.FineUploader({
        element: document.getElementById('fine-uploader-manual-trigger'),
        template: 'qq-template-manual-trigger',
...
}
    qq(document.getElementById("trigger-upload")).attach("click", function () {
        manualUploader#XX#.uploadStoredFiles();
    });
</script>

通过调用.getElementById来使用attach函数只是感觉不对，或者至少是笨拙的，是否有更好的方法可以在每个实例的基础上激活上传？

提前致谢 ķ

Answer 1

排序，但如果有人有更好的答案......

而不是使用document.getElementById("trigger-upload")

的演示

只需使用document.querySelector("#fine-uploader-manual-trigger #trigger-upload")

即可

例如

<div id="fine-uploader-manual-triggerXX"></div>

<script>
    var manualUploaderXX = new qq.FineUploader({
    element: document.getElementById('fine-uploader-manual-triggerXX'),
    template: 'qq-template-manual-trigger',
    ... // omitted for brevity 
    }

    qq(document.querySelector("#fine-uploader-manual-triggerXX #trigger-upload")).attach("click", function () {
       manualUploaderXX.uploadStoredFiles();
    });
</script>

如何使用带有一个模板的手动上传按钮的多个fineuploader实例

1 个答案: