用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

來源

2016-09-28 Mr. Bean

您正試圖通過換行分裂，但你的'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順序，在結束

來源

2016-09-28 18:47:22 xYuri

輝煌，但它留下了一個額外的圖像標記末尾 –

大聲笑是的，它會，讓我修復它 – 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'>"); 
      } 
     }

來源

2016-09-28 18:49:34

不顯示什麼時候我試過這個 –

用ajax響應顯示多個圖像

回答

相關問題