これを同期操作にするには、最後の転送が完了したときに新しい転送を開始する必要があります。たとえば、Gmailはすべてを一度に同時に送信します。AJAXファイルのアップロードの進行状況のイベントは、progressまたはonprogressrawXmlHttpRequestインスタンスです。
したがって、それぞれ$.ajax()の後に、サーバー側（何を使用するかはわかりません）で、JSON応答を送信して、次の入力でAJAXを実行します。success1つのオプションは、AJAX要素を各要素にバインドして、作業を簡単にすることです。これにより、で行うことができます$(this).sibling('input').execute_ajax()。
このようなもの：
$('input[type="file"]').on('ajax', function(){
var $this = $(this);
$.ajax({
'type':'POST',
'data': (new FormData()).append('file', this.files[0]),
'contentType': false,
'processData': false,
'xhr': function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener('progress', progressbar, false);
}
return xhr;
},
'success': function(){
$this.siblings('input[type="file"]:eq(0)').trigger('ajax');
$this.remove(); // remove the field so the next call won't resend the same field
}
});
}).trigger('ajax'); // Execute only the first input[multiple] AJAX, we aren't using $.each
上記のコードは複数<input type="file">用ですが、そうではありませ<input type="file" multiple>ん。その場合、次のようになります。
var count = 0;
$('input[type="file"]').on('ajax', function(){
var $this = $(this);
if (typeof this.files[count] === 'undefined') { return false; }
$.ajax({
'type':'POST',
'data': (new FormData()).append('file', this.files[count]),
'contentType': false,
'processData': false,
'xhr': function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener('progress', progressbar, false);
}
return xhr;
},
'success': function(){
count++;
$this.trigger('ajax');
}
});
}).trigger('ajax'); // Execute only the first input[multiple] AJAX, we aren't using $.each