0

私の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 イベントを取得する必要がありますか、それともサーバーからの応答が異なる 1 つのイベントだけを取得する必要がありますか?

ありがとう！

4

1 に答える 1

0

説明を求めてから数日が経ちましたので、できる限りあなたの質問にお答えします。

あなたの質問に直接答えるには: はい、アップロードごとに個別の onComplete コールバックを受け取る必要があります。reset()onComplete コールバックでアップローダーの API メソッドを呼び出しているため、最初のコールバック以降はコールバックを受信して​​いない可能性があります。このメソッドが何をするのか理解していないかもしれません。明確にするためにドキュメントを見てください。これはあなたがやりたいことではないと思います。

于 2013-06-24T14:21:03.213 に答える