Question

我试图在一个页面上显示来自远程服务器的多个图像，该页面是一个html文件，放置php块不会做任何事情来获取我想要的东西

使用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

Answer 1

试试这个，

$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个订单，最后添加了$i++;

Answer 2

scandir()已经给你一个数组了，为什么不只是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响应显示多个图像

2 个答案: