Создание изображений с помощью ajax

Question

Как создать цикл, который создает все изображения и загружает страницу отверстия перед ее обработкой? Я хочу, чтобы показать proccess, когда он создает образы, как: 1 из 100 изображений, созданных, 2 из 100 изображений, созданных ....

PHP код

// directory with all images (Source) 
$profileimages = array_slice(scandir('Z:/'), 2); 

//Array that contains the filenames that should be created from SQL database 
$profiles = Profiles(); 

$profileimages = array_map(function($e){ 
return pathinfo($e, PATHINFO_FILENAME); 
}, $profileimages); 


$results = array_intersect($profileimages, $profiles); 
$persons = implode(', ', $results); 

Javascript

var list = ['<?php echo $persons; ?>']; 
var arrayLength = list.length; 
for (var i = 0; i < arrayLength; i++) { 

// add-picture.php creates images to a destination directory 
var myData = 'filename=' + list[i]; 
     jQuery.ajax({ 
     type: "GET", 
     url: "add-picture.php", 
     data:myData, 
     success:function(response){ 
      $("#list").html(i); 

     }, 
     error:function (xhr, ajaxOptions, thrownError){ 
      alert(thrownError); 
     } 
    }); 
} 
</script> 

<div id="list"></div> 

Нужно просто создать массив и посетить страницу php для каждого изображения.

Answer 1

Вы хотите использовать функцию $.each в jQuery для перебора над человеком, вот заглушка того, как это может выглядеть.

var persons = ['personA', 'personB', 'personC', 'personD']; 
var $container = $("#list"); 
var numPersons = persons.length; 

$(persons).each(function (index, person) { 
    console.log(person, index); 
    var postData = {filename: person}; 

    jQuery.ajax({ 
     type: "POST", 
     url: "add-picture.php", 
     data: postData, 
     success:function(response){ 
      var $li = $("<li>"); 
      var count = index + 1; 
      // really you would set the text using something in `response` 
      $li.text(postData.filename + " " + count + " of " + numPersons); 
      $container.append($li); 
     }, 
     error:function (xhr, ajaxOptions, thrownError){ 
      alert(thrownError); 
     } 
    }); 
}); 

here is the fiddle