Bilder aus Ordner mit php und Hinzufügen zu HTML mit Javascript

Question

lässt sagen, ich habe einen Ordner namens "Früchte" und in diesem Ordner habe ich drei Ordner namens "Apfel", "Traube" und "Banane" und in jedem von denen habe ich ein jpg der Frucht (apple.jpg, usw.). In dieser Situation ist der Ordner „Früchte“ auf einem Server gespeichert: jackfruits.com/weirdfood/fruits/

, wie würde ich mich über eine XML erstellen, die ein Format

<fruits> 
    <fruit>apple</fruit> 
    <fruit>grape</fruit> 
    <fruit>banana</fruit> 
</fruits> 

und greifen jedes der hat Jpgs dann diese Informationen in Javascript anfordern und es in einen HTML-Code? wie wenn ich wollte, dass sie in einer HTML setzen, so dass die resultierende Seite etwas aussehen würde:

Banane

BILD BANANEN

<?php 
$url = "jackfruits.com/weirdfood/fruits/"; 

outputXml($url); 

function outputXml($url) { 
    $files = glob($url . "*"); 
    $dom = new DOMDocument(); 
    $fruits = $dom->createElement("fruits"); 
    $dom->appendChild($fruits); 
    foreach($files as $file) { 
     #need to create new element "fruit" and put file name in text within it 
     #then append to fruits 
    } 
    header("Content-type: text/xml"); 
    print($dom->saveXML()); 

} 

(function() { 
"use strict"; 

window.onload = function() { 
    getRequest; 
}; 

function ajax(address, ffunction) { 
    var request = new XMLHttpRequest(); 
    request.onload = ffunction; 
    request.open("GET", address, true); 
    request.send(); 
} 

function getRequest(value) { 
    ajax("fruits.php?", displayXml); 
} 

function displayXml() { 
    var xml = this.responseXML; 
    document.getElementById("allfruit").innerHTML = xml.querySelector("fruits").textContent; 
} 
})(); 

Answer 1

Beachten Sie, dass getRequest; nicht den anruf Funktion. Es sollte getRequest(); sein.

Sie könnten den Verzeichnisscan mit scandir() vereinfachen.

function outputXml($url) { 
    $files = scandir($url); 
    $dom = new DOMDocument(); 
    $fruits = $dom->createElement("fruits"); 
    $dom->appendChild($fruits); 
    foreach($files as $file) { 
     if($file!='.'&&$file!='..'&&is_dir($file)) { 
      $fruit=$dom->createElement("fruit"); 
      $fruit->nodeValue=$file; 
      $fruits->appendChild($fruit); 
     } 
    } 
    header("Content-type: text/xml"); 
    print($dom->saveXML()); 
} 

Nicht getestet. Natürlich vorausgesetzt, dass Sie Ihre Verzeichnisstruktur sicher sind: jackfruits.com/weirdfood/fruits/ x/x .jpg. Sie müssen den Code ein wenig ändern, wenn es andere Dateien gibt, oder Sie müssen Rekursion verwenden, um die Unterverzeichnisse zu durchlaufen, wenn es mehr Ebenen gibt.

Dann, wenn Sie

document.getElementById("allfruit").innerHTML=xml.querySelector("fruits").textContent

Sie zeigen die xml Code innerhalb des #allfuit div tun ... Sie werden es analysieren haben und die HTML zu generieren!

... Oder einfach den HTML-Code aus php zurück:

function outputXml($url) { 
     $files = scandir($url); 
     foreach($files as $file) { 
      if($file!='.'&&$file!='..'&&is_dir($file)) { 
       echo '<div>'.$fruit.'<br><img src="weirdfood/fruits/'.$fruit.'/'.$fruit.'.jpg"></div>'; 
      } 
     } 
    }