使用 Fineuploader 多次手动上传仅触发 1 个 onComplete 事件

Question

我的 MVC 4 应用程序中有这个多图像精细上传器。所有作品，我唯一的问题是当我上传多张图片时，我只获得第一张图片的“onComplete”事件。这是我的 HTML：

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

            <div id="triggerUploadHolder" style="height: 28px;">
                <div id="triggerUpload" class="box" style="background-color: springgreen; width: 150px; display: none;">
                    <a href="#" onclick="triggerUpload(); return false;">Upload now</a>
                </div>
            </div>

            <img id="attLoader" src="~/Content/FineUploader/loading.gif" alt="Loading..." style="display: none;" />

            <div id="thumbnail-fine-uploader"></div>

            @foreach (var attachment in Model.Attachments) {
                <div id="@attachment.Id"><a href="#" onclick="removeAttachment('@attachment.Id'); return false;">Remove this attachment</a><a href="@attachment.DocUrl" target="_blank"><img src="@attachment.DocUrl?w=250&mode=max" alt=""></a></div>
            }

这是我用来初始化上传器的 javascript：

    $(document).ready(function() {
        createUploader();
    });

    function triggerUpload() {
        uploader.uploadStoredFiles();
    }

    var uploader;
    function createUploader() {
        uploader = new qq.FineUploader({
            element: $('#fine-uploader')[0],
            autoUpload: false,
            debug: true,
            request: {
                endpoint: '/MyController/UploadAttachment',
                params: {
                    objLogId: $("#ObjLogModel_Id").val()
                }
            },
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                sizeLimit: 1024000,
                itemLimit: 5
            },
            messages: {

            },
            text: {
                uploadButton: "Click here or Drag a file from your computer",
                dragZone: "Drop File here to upload",
                cancelButton: "Cancel!"
            },
            template: '<div class="qq-uploader span12">' +
                '<div class="qq-upload-button btn btn-success" style="width: auto; color:red;">{uploadButtonText}</div>' +
                '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                '<span class="qq-drop-processing"><span></span><span class="qq-drop-processing-spinner"></span></span>' +
                '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                '</div>',
            callbacks: {
                onSubmit: function (id, name) {
                    $("#triggerUpload").fadeIn();
                    // console.log("onSubmit: " + id + " " + name);
                },
                onCancel: function (id, name) {
                    // console.log("onCancel: " + id + " " + name);
                    var submittedFileCount = uploader.getUploads({status: qq.status.SUBMITTED}).length;
                    if (submittedFileCount == 0) {
                        $("#triggerUpload").fadeOut();
                    }
                    // console.log("submittedFileCount: " + submittedFileCount);
                },
                onUpload: function (id, name) {
                    // console.log("onUpload: " + id + " " + name);
                    $("#triggerUpload").fadeOut();
                    $("#attLoader").fadeIn();
                },
                onComplete: function (id, fileName, responseJSON) {
                    // console.log("onComplete - fileName: " + fileName + " // " + responseJSON);
                    // console.dir(responseJSON);
                    if (responseJSON.success) {

                        if ($("#ObjLogModel_Id").val() == "") {
                            $("#ObjLogModel_Id").val(responseJSON.objLogId);
                            history.pushState({ foo: "bar" }, "Saved", responseJSON.objLogId + "/");
                        }

                        $("#attLoader").fadeOut();

                        $('#thumbnail-fine-uploader').prepend('<div id="' + responseJSON.Id + '"><a href="#" onclick="removeAttachment("' + responseJSON.Id + '"); return false;">Remove this attachment</a><a href="' + responseJSON.url +'" target="_blank"><img src="' + responseJSON.url + '?w=250&mode=max" alt="' + fileName + '"></a></div>');

                        uploader.reset();

                    }
                }
            }
        });
    }

我应该为每次上传获取单独的 onComplete 事件，还是只获取来自服务器的不同响应的事件？

谢谢！

Answer 1

自从我要求澄清以来已经有好几天了，所以我会尽可能地回答你的问题。

要直接回答您的问题：是的，您应该为每次上传收到单独的 onComplete 回调。由于您在 onComplete 回调中调用上传程序上的 reset() API 方法，因此您可能在第一次之后没有收到任何回调。也许你不明白这个方法是做什么的。查看文档以进行澄清。我怀疑这不是你想要做的。