用ajax响应显示多个图像

问题描述：

我想在单个页面上显示来自远程服务器的多个图像，该页面是一个HTML文件，其中的php块将不会做任何事情来获取我想要的东西用ajax响应显示多个图像

使用PHP 5.6版本中，PHP代码

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

Ajax响应代码：

$(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'>"); 
       } 
      } 
     }); 
});

所有我一直从服务器得到的是 1354876944ABF.jpg_MG_0085.jpg 和一个空的图像占位（而不是两个，正好一个），用于在图像和图像地址示出了两个图像名称中一个链路粘在一起

上传/图像/虚线/ 1354876944ABF.jpg_MG_0085.jpg

所述响应链路应该是在两个（对于本示例）不同的行和图像，其中<img>是对AJAX调用中HTML

您正试图通过换行分裂，但你的'echo'不回送一个换行符 –

好吧，我试图在echo语句的末尾使用th
，它确实分解了这一行，但不显示图像，因为它仍然是一样的 –

'
'不是'\ n' –

答

试一试，

$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++;}

和改变ajax到：使用|||作为分隔符

$(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'>"); 
      } 
     } 
    }); 
});

这就是。

编辑：现在应能正常工作， EDIT2：改变$i = 0顺序，在结束

辉煌，但它留下了一个额外的图像标记末尾 –

大声笑是的，它会，让我修复它 – xYuri

不，在浏览器中找不到控制台的图像 –

答

scandir()已经给你一个阵列添加$i++;，所以为什么不只是json_encode并返回呢？ unset()任何输出不是一个有效的文件：

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

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

echo json_encode($files);

然后在你的成功块：

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'>"); 
      } 
     }

不显示什么时候我试过这个 –

用ajax响应显示多个图像

相关推荐