web-dev-qa-db-de.com

So laden Sie alle Bilder mit Jquery/Javascript aus einem Ordner in meine Webseite

Ich habe einen Ordner namens "images" im selben Verzeichnis wie meine .js-Datei. Ich möchte alle Bilder aus dem Ordner "images" mit Jquery/Javascript in meine HTML-Seite laden.

Da Namen von Bildern keine aufeinanderfolgenden ganzen Zahlen sind, wie soll ich diese Bilder laden?

41
rishy

Funktioniert sowohl localhost als auch auf Live-Server ohne Probleme und ermöglicht die Erweiterung der begrenzten Liste der zulässigen Dateierweiterungen: 

var folder = "images/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});

Im Grunde eine Verbesserung gegenüber Roys OA

53
Roko C. Buljan

Benutzen : 

var dir = "Src/themes/base/images/";
var fileextension = ".png";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //List all .png file names in the page
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location.Host, "").replace("http://", "");
            $("body").append("<img src='" + dir + filename + "'>");
        });
    }
});

Wenn Sie andere Erweiterungen haben, können Sie es zu einem Array machen und dieses dann einzeln mit in_array() durchgehen.

Ps: Der obige Quellcode wird nicht getestet.

50
Roy M J

Auf diese Weise können Sie weitere Dateierweiterungen hinzufügen, wie von Roy M J oben auf dieser Seite angegeben.

var fileextension = [".png", ".jpg"];
$(data).find("a:contains(" + (fileextension[0]) + "), a:contains(" + (fileextension[1]) + ")").each(function () { // here comes the rest of the function made by Roy M J   

In diesem Beispiel habe ich noch mehr enthält. 

9
Bart Hoekstra

Hier ist eine Möglichkeit, dies zu tun. Umfasst auch etwas PHP.

Der PHP Teil:

$filenameArray = [];

$handle = opendir(dirname(realpath(__FILE__)).'/images/');
        while($file = readdir($handle)){
            if($file !== '.' && $file !== '..'){
                array_Push($filenameArray, "images/$file");
            }
        }

echo json_encode($filenameArray);

Der jQuery-Teil:

$.ajax({
            url: "getImages.php",
            dataType: "json",
            success: function (data) {

                $.each(data, function(i,filename) {
                    $('#imageDiv').prepend('<img src="'+ filename +'"><br>');
                });
            }
        });

Im Grunde nehmen Sie eine PHP - Datei vor, um die Liste der Bilddateinamen als JSON zurückzugeben, greifen Sie diese JSON mit einem Ajax-Aufruf auf und fügen Sie sie an die HTML-Datei an. Sie möchten wahrscheinlich die Dateien filtern, die Sie aus dem Ordner greifen.

Hatte Hilfe beim PHP-Teil von 1

5
Pnar Sbi Wer

Wenn Sie, wie in meinem Fall, die Bilder aus einem lokalen Ordner auf Ihrem Computer laden möchten, gibt es eine einfache Möglichkeit, dies mit einer sehr kurzen Windows-Batchdatei zu tun. Hierbei wird die Möglichkeit verwendet, die Ausgabe eines Befehls an eine Datei zu senden, indem Sie> (zum Überschreiben einer Datei) und >> (zum Anhängen an eine Datei) verwenden.

Möglicherweise können Sie eine Liste von Dateinamen wie folgt in eine reine Textdatei ausgeben:

dir /B > filenames.txt

Wenn Sie jedoch eine Textdatei einlesen, müssen Sie etwas faffer sein. Ich gebe stattdessen eine Javascript-Datei aus, die in Ihre geladen werden kann, um eine globale Variable mit allen Dateinamen zu erstellen.

echo var g_FOLDER_CONTENTS = mlString(function() { /*! > folder_contents.js
dir /B images >> folder_contents.js
echo */}); >> folder_contents.js

Der Grund für die komische Funktion mit Kommentar innerhalb der Notation besteht darin, die Begrenzung für mehrzeilige Zeichenfolgen in Javascript zu umgehen. Die Ausgabe des Befehls dir kann nicht formatiert werden, um eine korrekte Zeichenfolge zu schreiben. Daher habe ich eine Problemumgehung hier gefunden.

function mlString(f) {
    return f.toString().
        replace(/^[^\/]+\/\*!?/, '').
        replace(/\*\/[^\/]+$/, '');
}

Fügen Sie dies in Ihren Hauptcode ein, bevor die generierte Javascript-Datei ausgeführt wird, und Sie erhalten dann eine globale Variable namens g_FOLDER_CONTENTS, eine Zeichenfolge, die die Ausgabe des Befehls dir enthält. Dies kann dann mit einem Token versehen werden und Sie haben eine Liste von Dateinamen, mit denen Sie machen können, was Sie möchten.

var filenames = g_FOLDER_CONTENTS.match(/\S+/g);

Hier ist ein Beispiel für alles: image_loader.Zip

In diesem Beispiel generiert run.bat die Javascript-Datei und öffnet die Datei index.html, sodass Sie die index.html nicht selbst öffnen müssen.

NOTE: .bat ist ein ausführbarer Typ in Windows. Öffnen Sie sie daher vor dem Ausführen in einem Texteditor, wenn Sie von einem beliebigen zufälligen Internet-Link wie diesem herunterladen.

Wenn Sie Linux oder OSX verwenden, können Sie wahrscheinlich etwas Ähnliches wie die Batch-Datei tun und eine korrekt formatierte Javascript-Zeichenfolge ohne die mlString-Funktion erzeugen.

2
MrFlamey
$(document).ready(function(){
  var dir = "test/"; // folder location
  var fileextension = ".jpg"; // image format
  var i = "1";

  $(function imageloop(){
    $("<img />").attr('src', dir + i + fileextension ).appendTo(".testing");
    if (i==13){
      alert('loaded');
    }
    else{
      i++;
      imageloop();
    };
  });   
});

Für dieses Skript habe ich meine Bilddateien in einem Ordner als 1.jpg, 2.jpg, 3.jpg, ... bis 13.jpg benannt.

Sie können Verzeichnis- und Dateinamen beliebig ändern.

1
Siva Shanmugam

Wenn Sie dies ohne jQuery tun möchten - hier ist eine reine JS-Variante ( von hier ) der Antwort, die derzeit am häufigsten bewertet wird:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/img", true);
xhr.responseType = 'document';
xhr.onload = () => {
  if (xhr.status === 200) {
    var elements = xhr.response.getElementsByTagName("a");
    for (x of elements) {
      if ( x.href.match(/\.(jpe?g|png|gif)$/) ) { 
          let img = document.createElement("img");
          img.src = x.href;
          document.body.appendChild(img);
      } 
    };
  } 
  else {
    alert('Request failed. Returned status of ' + xhr.status);
  }
}
xhr.send()
1
Rainman

Sie können die Methoden fs.readdir oder fs.readdirSync verwenden, um die Dateinamen im Verzeichnis abzurufen.

Der Unterschied zwischen den beiden Methoden besteht darin, dass die erste asynchron ist. Daher müssen Sie eine Callback-Funktion bereitstellen, die ausgeführt wird, wenn der Lesevorgang endet.

Die zweite ist synchron, es wird das Dateinamensfeld zurückgegeben, aber die weitere Ausführung Ihres Codes wird angehalten, bis der Lesevorgang abgeschlossen ist.

Danach müssen Sie einfach die Namen durchlaufen und mithilfe der Funktion "Anhängen" an die entsprechenden Speicherorte hinzufügen. Um herauszufinden, wie es funktioniert, siehe HTML DOM- und JS-Referenz

0
Aman Chhabra

Basierend auf der Antwort von Roko C. Buljan habe ich diese Methode entwickelt, die Bilder aus einem Ordner und seinen Unterordnern abruft. Dies erfordert möglicherweise eine Fehlerbehandlung, funktioniert aber für eine einfache Ordnerstruktur gut.

var findImages = function(){
    var parentDir = "./Resource/materials/";

    var fileCrowler = function(data){
        var titlestr = $(data).filter('title').text();
        // "Directory listing for /Resource/materials/xxx"
        var thisDirectory = titlestr.slice(titlestr.indexOf('/'), titlestr.length)

        //List all image file names in the page
        $(data).find("a").attr("href", function (i, filename) {
            if( filename.match(/\.(jpe?g|png|gif)$/) ) { 
                var fileNameWOExtension = filename.slice(0, filename.lastIndexOf('.'))
                var img_html = "<img src='{0}' id='{1}' alt='{2}' width='75' height='75' hspace='2' vspace='2' onclick='onImageSelection(this);'>".format(thisDirectory + filename, fileNameWOExtension, fileNameWOExtension);
                $("#image_pane").append(img_html);
            }
            else{ 
                $.ajax({
                    url: thisDirectory + filename,
                    success: fileCrowler
                });
            }
        });}

        $.ajax({
        url: parentDir,
        success: fileCrowler
    });
}
0
ashish

Bei der Suche nach Bilddateien in Chrome (wie zuvor vorgeschlagen) funktionierte das Verwenden von Chrome nicht, da Folgendes generiert wurde:

(...) i18nTemplate.process(document, loadTimeData);
</script>
<script>start("current directory...")</script>
<script>addRow("..","..",1,"170 B","10/2/15, 8:32:45 PM");</script>
<script>addRow("fotos-interessantes-11.jpg","fotos-interessantes-> 11.jpg",false,"","");</script>

Der zuverlässigste Weg ist vielleicht so etwas zu tun:

var folder = "img/";

$.ajax({
    url : folder,
    success: function (data) {
        var patt1 = /"([^"]*\.(jpe?g|png|gif))"/gi;     // extract "*.jpeg" or "*.jpg" or "*.png" or "*.gif"
        var result = data.match(patt1);
        result = result.map(function(el) { return el.replace(/"/g, ""); });     // remove double quotes (") surrounding filename+extension // TODO: do this at regex!

        var uniqueNames = [];                               // this array will help to remove duplicate images
        $.each(result, function(i, el){
            var el_url_encoded = encodeURIComponent(el);    // avoid images with same name but converted to URL encoded
            console.log("under analysis: " + el);
            if($.inArray(el, uniqueNames) === -1  &&  $.inArray(el_url_encoded, uniqueNames) === -1){
                console.log("adding " + el_url_encoded);
                uniqueNames.Push(el_url_encoded);
                $("#slider").append( "<img src='" + el_url_encoded +"' alt=''>" );      // finaly add to HTML
            } else{   console.log(el_url_encoded + " already in!"); }
        });
    },
    error: function(xhr, textStatus, err) {
       alert('Error: here we go...');
       alert(textStatus);
       alert(err);
       alert("readyState: "+xhr.readyState+"\n xhrStatus: "+xhr.status);
       alert("responseText: "+xhr.responseText);
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0
Pedro Reis

Das kann man nicht automatisch machen. Ihr JS kann die Dateien nicht in demselben Verzeichnis sehen.

Am einfachsten ist es wahrscheinlich, Ihrem JavaScript eine Liste dieser Bildnamen zu geben.

Andernfalls können Sie möglicherweise mithilfe von JS eine Verzeichnisliste vom Webserver abrufen und diese analysieren, um die Liste der Bilder abzurufen.

0
sync

In jQuery können Sie mit Ajax ein serverseitiges Skript aufrufen. Das serverseitige Skript findet alle Dateien im Ordner und gibt sie in Ihre HTML-Datei zurück, wo Sie die zurückgegebenen Informationen verarbeiten müssen.

0
jeff
Listar una serie de imágenes contenidas en una carpeta y mostrarlas en el body

dies ist der Code, der für mich funktioniert. Ich möchte die Bilder direkt auf meiner Seite auflisten, so dass Sie nur das Verzeichnis angeben müssen, in dem Sie die Bilder finden können, zum Beispiel -> dir = "images /" Ich mache eine Teilzeichenfolge var pathName = dateiname.substring (dateiname.lastIndexOf ('/') + 1); mit dem ich nur den Namen der aufgelisteten Dateien mitbringe und am Ende verlinke ich meine URL, um sie im Body zu veröffentlichen $ ("Körper"). anhängen ($ (""));

Para correrlo necesitan la librería de jquery
Espero les sea útil Saludos desde México.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-1.6.3.min.js"></script>
        <script>


        var dir = "imagenes/";
        var fileextension = ".jpg";
        $.ajax({
            //This will retrieve the contents of the folder if the folder is configured as 'browsable'
            url: dir,
            success: function (data) {
                //Lsit all png file names in the page
                $(data).find("a:contains(" + fileextension + ")").each(function () {
                    var filename = this.href.replace(window.location.pathname, "").replace("http://", "");
            var pathName = filename.substring(filename.lastIndexOf('/') + 1);               
                    $("body").append($("<img src=" + dir + pathName + "></img>"));
            console.log(dir+pathName);
                });
            }
        });



        </script>

  </head>
  <body>
<img src="1_1.jpg">
  </body>
</html>
0
Sancho Sancho

Fügen Sie das folgende Skript hinzu:

<script type="text/javascript">

function mlString(f) {
    return f.toString().
        replace(/^[^\/]+\/\*!?/, '');
        replace(/\*\/[^\/]+$/, '');
}

function run_onload() {
    console.log("Sample text for console");
    var filenames = g_FOLDER_CONTENTS.match(/\S+/g);
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < filenames.length; ++i) {
        var extension = filenames[i].substring(filenames[i].length-3);
        if (extension == "png" || extension == "jpg") {

var iDiv = document.createElement('div');
iDiv.id = 'images';
iDiv.className = 'item';
document.getElementById("image_div").appendChild(iDiv);
iDiv.appendChild(fragment);

            var image = document.createElement("img");
            image.className = "fancybox";
            image.src = "images/" + filenames[i];
            fragment.appendChild(image);
        }
    }
     document.getElementById("images").appendChild(fragment);

}

</script>

dann erstellen Sie eine JS-Datei mit den folgenden:

var g_FOLDER_CONTENTS = mlString(function() { /*! 
1.png
2.png
3.png 
*/}); 
0
Suraj Lulla