0

HTML5 複数ファイル アップローダーを使用しています。何らかの目的で、リクエストを JavaScript 配列のキューに入れています。ここでは 2 つのアプローチを試しています。1 つは、for ループを使用してすべてのリクエストをループで送信することです。次のアプローチは、前のリクエストは終了しました。ここにコードがあります、

    function processUploads(i)
{
    if(typeof(i)=="undefined")
        return;

    if(i==0)
    {
        for(i=0;i<4;i++)
        {
            xhrQ[i].open("POST",FUurl,true);
            xhrQ[i].send(fdQ[i]);
            xhrQ[i].onreadystatechange = function() {
                if (xhrQ[i].readyState == 4 && xhrQ[i].status == 200) {                
                    uploadComplete(xhrQ[i],i);
                }
            }
        }
    }
    else
    {
        xhrQ[i].open("POST",FUurl,true);
        xhrQ[i].send(fdQ[i]);
        xhrQ[i].onreadystatechange = function() {
            if (xhrQ[i].readyState == 4 && xhrQ[i].status == 200) {                
                uploadComplete(xhrQ[i],i);
            }
        }
    }
}

function uploadComplete(xhr,i)
{
    //processUploads(i+1);
    var responseJSON = eval('(' + xhr.responseText + ')');
    var upldrID = responseJSON.data.queueId;

    var fileProgElem = $("#file_content").find("div[file-count="+upldrID+"]");
    fileProgElem.attr("upload","finished");
    fileProgElem.find("input[id=asset_id]").val(responseJSON.data.asset_id);

    if(typeof(responseJSON)=="undefined") {
        return;
    }

    $("#bar"+upldrID).css("width: 100%");
    $("#progress_text"+upldrID).addClass("hide");
    $("#progress_bar"+upldrID).html("Upload Complete!");

    var pagename = $("#pagename").attr('value');

    var cover_art = "<img src='"+responseJSON.data.thumb_location+"' alt='"+$.trim($("#file_name"+upldrID).html())+"' />";
    $("#cover_art"+upldrID).html(cover_art);

    //Hide the cross icon and enable the save 
    var action_divs = '<div id="done'+upldrID+'" class="hide enable">'
            +'<a id="delete_file_'+upldrID+'" onclick="saveWorkspaceFileDetails(\''+responseJSON.data.project_id+'\',\''+responseJSON.data.asset_id+'\',\''+upldrID+'\',\''+responseJSON.data.file_name+'\',\''+responseJSON.data.size+'\',\'delete\',\''+pagename+'\')">'
            +'<i class="tl-icon-20-close-gray"></i>'
            +'</a>'
            +'</div>';

    $("#cancel_upload"+upldrID).append(action_divs);

    $("#progress_cancel"+upldrID).addClass("hide").removeClass("show");
    $("#done"+upldrID).addClass("show").removeClass("hide");        

    //To show the post and cancel button
    $("#submitFileUpload").removeClass("hide").addClass("show");

    //Updating the title with the default value of file_name
    var file_title =  $.trim($("#file[file-count='"+upldrID+"']").find("#file_title").val());
    if (file_title == "" && file_title != undefined){
        $("#file[file-count='"+upldrID+"']").find("#file_title").val(responseJSON.data.file_name);
    }

    //For other category we need to enable the dropdown     
    if(responseJSON.data.category_id=='999')
    {
        $("#select_category"+upldrID).removeClass("hide").addClass("show");
    }

            //totSelFiles is a number of selected files that i sets as a global variable
    if(i<(totSelFiles-1))
    {
        processUploads(i+1);
    }
    else
        return;
}

ifしかし問題は、ループで readyState と status を 0 として取得していることです。しかし、ファイルはサーバーにアップロードされており、そのブロックのみを有効にすると、else 条件もうまく機能します。それで、何が問題になる可能性がありますか。私は非常に混乱しています。どんな助けでも大歓迎です。

4

1 に答える 1

1

この問題は、onreadystatechange に使用する無名関数で作成したクロージャーに関連しています。の値にアクセスできますがi、クロージャーの作成時からではなく、その実行時からアクセスできます。その時点でiは常に 4 でありxhrQ[i]、正しいオブジェクトを参照しません。this代わりに使用

xhrQ[i].onreadystatechange = function() {
   if(this.readyState == 4 && this.status == 200) {

   }
}

問題はi、uploadComplete() 関数内のインデックスを続行することです。このためには、現在のインデックスのローカル コピーを作成するすぐに実行される関数を使用して、別の内部クロージャーを作成する必要がある場合があります。

xhrQ[i].onreadystatechange = (function(_innerI) {
   var that = this;
   return function() {
      if(that.readyState == 4 && that.status == 200) {
         uploadComplete(that, _innerI);
      }
   }
})(i);
于 2012-11-22T08:43:20.447 に答える