使用 ajax 响应显示多个图像答案

【问题标题】：Displaying multiple images with an ajax response使用 ajax 响应显示多个图像
【发布时间】：2016-09-28 18:39:51
【问题描述】：

我正在尝试在单个页面上显示来自远程服务器的多个图像，该页面是一个 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 和一个空的图像占位符（不是两个，只是一个）用于图像的位置并且图像地址显示两个图像名称粘在一个链接中

上传/图片/dashed/1354876944ABF.jpg_MG_0085.jpg

响应链接应位于两个（对于此示例）不同的行和图像上，其中 <img> 位于 ajax 调用内的 html 上

【问题讨论】：

您尝试按换行符分割，但您的 echo 没有回显换行符
好的，我尝试在 echo 语句的末尾使用 th
，它确实打破了行，但不显示图像，因为它仍然是相同的跨度>
<br /> 不是\n
这是公平的，但因为我还是菜鸟
回显 \n 而不是 <br />。然后 PHP 和 JavaScript 使用匹配字符。

标签： javascript php jquery html ajax

【解决方案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++;

【讨论】：

很棒，但它在末尾留下了一个额外的图像标签
不，浏览器中的控制台找不到图片
查看浏览器控制台中图片的路径是什么
刚刚尝试了第二次编辑，显示图像但代码没有变化
在第二次编辑中更改了有关 i++ 的代码，但显示没有变化

【解决方案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'>"); 
            }
        }

【讨论】：