CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Richie
Richie

Reputation: 430

Displaying multiple images with an ajax response

I am trying to display multiple images coming from a remote server on a single page, the page is a html file where putting php blocks wouldn't be doing anything to get thing I want

Using PHP version 5.6, the code for the php is

$dir = "uploads/image/dashed/";
$files = scandir($dir);
foreach ($files as $file)
{
if ( is_file($dir. $file) ){
    echo $file;
    }
}

the ajax response code is:

    $(document).ready(function(){
        $.ajax({
            async: true,
            type: 'POST',
            url: 'folder.php',
            success: function(data){
               $("#imageContent").html(data).append("<br/>");
               var images = data.split("\n");
                for (var i = 0, j = images.length; i < j; i++){
                   $("#imageContent").append("<img src='uploads/image/dashed/" + images[i] + "' width='300'>"); 
                }
            }
        });
});

all I keep getting from the server is 1354876944ABF.jpg_MG_0085.jpg and an empty image place holder (not two, just the one) for where the image and the image address is showing two image names stuck together in one link

uploads/image/dashed/1354876944ABF.jpg_MG_0085.jpg

where the response link should be on two (for this example) different lines and images where the <img> is on the html inside the ajax call

Upvotes: 0

Views: 2961

Answers (2)

xYuri
xYuri

Reputation: 385

Try This, 

$dir = "uploads/image/dashed/";
$files = scandir($dir);
$i = 1;
$count = count($files);
foreach ($files as $file){

if(is_file($dir. $file)){
if($i == $count){
echo $file;
}else{echo $file.'|||';
   }
  }
$i++;}

and change ajax to:

$(document).ready(function(){
    $.ajax({
        async: true,
        type: 'POST',
        url: 'folder.php',
        success: function(data){
           $("#imageContent").html(data).append("<br/>");
           var images = data.split("|||");
            for (var i = 0, j = images.length; i < j; i++){
               $("#imageContent").append("<img src='uploads/image/dashed/" + images[i] + "' width='300'>"); 
            }
        }
    });
});

thats using ||| as a delimiter.

EDIT: now it should work properly, EDIT2: changed $i = 0 order, added $i++; at the end

Upvotes: 1

The One and Only ChemistryBlob
The One and Only ChemistryBlob

Reputation: 7884

scandir() is already giving you an array, so why not just json_encode it and return this? unset() any output that is not a valid file:

$files = scandir($dir);
$count = count($files);

for($i = 0; $i < $count; $i++) {
    if ( !is_file($dir. $file) ){
        unset($files[$i]);        
    }
}

echo json_encode($files);

then in your success block:

success: function(data){
           $("#imageContent").html(data).append("<br/>");
           var i,
               json = JSON.parse(data);          
           for (i in json){
               $("#imageContent").append("<img src='uploads/image/dashed/" + json[i] + "' width='300'>"); 
            }
        }

Upvotes: 1

Related Questions