### ajaxを使ったファイルアップロードを繰り返し行いたい
ajaxを使ってプログレスバーのあるファイルアップロードを行う際、ファイルが複数の場合一つ一つファイルのアップロードを行いたいのですがajaxが並列に処理されてしまい思い通りにいきません。
console.log()の出力で分かりやすく動きを説明すると(fileObjの中身は2個あるとする)
現在:
uploadStart
uploadStart
uploadEnd
uploadEnd
理想
uploadStart
uploadEnd
uploadStart
uploadEnd
該当のソースコード
//fileObj = formに格納されたアップロードするファイルの配列 var fileObjLength = fileObj.length-1; $(fileObj).each(function(i){ console.log("uploadStart") var fd = new FormData(); //ファイルの情報をfdに追加 var url = "*******" jqxhr = $.ajax({ type: 'POST' ,url: url ,data: fd ,processData: false ,contentType: false ,async: true ,xhr : function(){ var XHR = $.ajaxSettings.xhr(); if(XHR.upload){ XHR.upload.addEventListener('progress',function(e){ //.progress-barと.percentageに通信状況を表示 progre = parseInt(e.loaded/e.total*100); $(".progress-bar").css("width",progre + "%"); $("percentage").text(progre + "%"); }, false); } return XHR; } }).done(function(){ console.log("uploadEnd") if(fileObjLength == i){ //全て終わったらの処理 }else{ //fileObjにまだfaileが残っている場合progress-barとpercentageを0にしてもう一度は始めたい $(".progress-bar").css("width",0 + "%"); $(".percentage").text(0 + "%"); } }).fail(function(jqxhr,status,error){ //エラー処理 }); }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。