Как задать индентификатор файла при загрузке через AJAX, который вызывается в цикле?

Question

[Серж Ткач]

Скрипт загружает файлы через AJAX. НО файлы не оправляются одним запросом (может быть слишком большим), а перебираются в цикле. Все вроде бы классно.

Но!

Хочу повесить прогрессбар, отображающий процент загрузки каждого файла. И тут я понимаю, что вообще не знаю, как
внутри xhr: function(){ мне узнать, процент загрузки какого файл получен.

Буду благодарен за любую подсказку!
Спасибо!

i = 1;			
			
      $.each( files, function( key, value ){
        var data = new FormData();
        data.append( key, value );
				
				// progress
// Создается контейнер для прогрессбара отдельной фотографии
				$('#load-bar_progress').append('<div id="progress-photo'+i+'"></div>'); 
				$('.load-bar_container').addClass('_active'); // Show uploader gif
				
				$.ajax({
					url: 'uploader.php',
					type: 'POST',
					data: data,
					cache: false,
					dataType: 'json',
					processData: false, // Don't process the files
					contentType: false, // string query			
					
					xhr: function(){
						//upload Progress
						var xhr = $.ajaxSettings.xhr();
						if (xhr.upload) {
							xhr.upload.addEventListener('progress', function(event) {
								var percent = 0;
								var position = event.loaded || event.position;
								var total = event.total;
								if (event.lengthComputable) {
									percent = Math.ceil(position / total * 100);
								}								
								//update progressbar
								// Внимание!
								// Вот тут-то и проблема: i undefined
								$("#progress-photo"+i).css("width", + percent +"%");
								$("#progress-photo"+i).text(percent +"%");
							}, true);
						}
						return xhr;
					},
					// ...
					

				});			
				
				++i;
      });

Answer 1

[Максим Тимофеев]

посылайте их по очереди, последовательно, вот Вам и будет идентификатор загрузки. Да и сервер с меньшей вероятностью таймаут поймает.