用ajax响应显示多个图像 [英] Displaying multiple images with an ajax response

问题描述

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

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

使用PHP 5.6版，php的代码为

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

ajax响应代码为:

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

我不断从服务器获取的信息是 1354876944ABF.jpg_MG_0085.jpg 还有一个用于放置图片的空白图片占位符(不是两个，只有一个) 并且图片地址显示两个图片名称在一个链接中粘在一起

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

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

其中响应​​链接应位于两行(对于本示例而言)不同的行和图像上，其中<img>位于ajax调用内的html上

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

推荐答案

尝试一下，

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

那就是使用|||作为分隔符.

thats using ||| as a delimiter.

编辑:现在它应该可以正常工作了， EDIT2 :更改了$i = 0的顺序，在末尾添加了$i++;

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

这篇关于用ajax响应显示多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！