使用ajax创建图像

时间:2015-09-12 09:15:11

标签: php jquery arrays

如何创建一个循环来创建所有图像并在处理之前加载孔页?我想在创建图像时显示过程:创建100个图像中的1个,创建100个图像中的2个....

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页面

1 个答案:

答案 0 :(得分:1)

你想在jQuery中使用$.each函数来迭代人,这里有一个它看起来如何的存根。

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