web-dev-qa-db-fra.com

Comment charger toutes les images d'un de mes dossiers dans ma page Web à l'aide de Jquery/Javascript

J'ai un dossier nommé "images" dans le même répertoire que mon fichier .js. Je souhaite charger toutes les images du dossier "images" dans ma page HTML à l'aide de Jquery/Javascript.

Puisque les noms des images ne sont pas des entiers successifs, comment suis-je censé charger ces images?

javascriptjqueryhtmlimage
41
rishy

Fonctionne à la fois sur localhost et sur le serveur live sans problèmes et vous permet d’élargir la liste délimitée des extensions de fichiers autorisées: 

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

Fondamentalement, une amélioration de l'arthrose de Roy

53
Roko C. Buljan

Utilisation : 

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

Si vous avez d'autres extensions, vous pouvez en faire un tableau, puis parcourir l'une après l'autre en utilisant in_array().

P.s: Le code source ci-dessus n'a pas été testé.

50
Roy M J

C'est le moyen d'ajouter d'autres extensions de fichiers, dans l'exemple donné par Roy M J en haut de cette page.

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

Dans cet exemple, j'ai ajouté plus contient. 

9
Bart Hoekstra

Voici une façon de le faire. Cela implique de faire un peu PHP également.

La partie PHP:

$filenameArray = [];

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

echo json_encode($filenameArray);

La partie jQuery:

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

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

Donc, en gros, vous créez un fichier PHP pour vous renvoyer la liste des noms de fichiers d’image sous forme de fichier JSON, récupérez ce fichier JSON à l’aide d’un appel ajax, puis ajoutez-le à l’ajout du code HTML. Vous voudrez probablement filtrer les fichiers que vous récupérez dans le dossier.

Avait un peu d'aide sur la partie php de 1

5
Pnar Sbi Wer

Si, comme dans mon cas, vous souhaitez charger les images d'un dossier local sur votre propre ordinateur, il existe un moyen simple de le faire avec un fichier de commandes Windows très court. Ceci utilise la possibilité d'envoyer la sortie de n'importe quelle commande dans un fichier en utilisant> (pour écraser un fichier) et >> (pour l'ajouter à un fichier).

Potentiellement, vous pouvez générer une liste de noms de fichiers dans un fichier texte tel que:

dir /B > filenames.txt

Cependant, lire dans un fichier texte nécessite plus de temps, donc je produis plutôt un fichier javascript, qui peut ensuite être chargé dans votre pour créer une variable globale avec tous les noms de fichiers qu'il contient.

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

La raison de la fonction étrange avec commentaire dans la notation est de contourner la limitation des chaînes multilignes en Javascript. La sortie de la commande dir ne peut pas être formatée pour écrire une chaîne correcte. J'ai donc trouvé une solution de contournement ici .

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

Ajoutez ceci dans votre code principal avant que le fichier javascript généré ne soit exécuté. Vous obtiendrez ensuite une variable globale appelée g_FOLDER_CONTENTS, qui est une chaîne contenant le résultat de la commande dir. Cela peut ensuite être segmenté et vous aurez une liste de noms de fichiers, avec lesquels vous pouvez faire ce que vous voulez.

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

Voici un exemple de tout cela réuni: image_loader.Zip

Dans l'exemple, run.bat génère le fichier Javascript et ouvre index.html. Vous n'avez donc pas besoin d'ouvrir index.html vous-même.

NOTE: .bat est un type exécutable dans Windows, ouvrez-le donc dans un éditeur de texte avant de l'exécuter si vous téléchargez à partir d'un lien Internet aléatoire comme celui-ci.

Si vous utilisez Linux ou OSX, vous pouvez probablement faire quelque chose de similaire au fichier de commandes et produire une chaîne javascript correctement formatée sans aucun des éléments mlString faff.

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

Pour ce script, j'ai nommé mes fichiers image dans un dossier: 1.jpg, 2.jpg, 3.jpg, ... à 13.jpg.

Vous pouvez modifier les noms de répertoire et de fichier à votre guise.

1
Siva Shanmugam

Vous pouvez utiliser les méthodes fs.readdir ou fs.readdirSync pour obtenir les noms de fichier dans le répertoire.

La différence entre les deux méthodes est que la première est asynchrone. Vous devez donc fournir une fonction de rappel qui sera exécutée à la fin du processus de lecture.

La seconde est synchrone, elle retournera le tableau de noms de fichiers, mais elle arrêtera toute exécution ultérieure de votre code jusqu'à la fin du processus de lecture.

Après cela, il vous suffit de parcourir les noms et d’utiliser la fonction d’ajout, de les ajouter à leurs emplacements appropriés. Pour en savoir plus sur son fonctionnement, voir Référence HTML DOM et JS

0
Aman Chhabra

Sur la base de la réponse de Roko C. Buljan, j'ai créé cette méthode qui obtient les images d'un dossier et de ses sous-dossiers . Cela peut nécessiter un traitement d'erreur mais fonctionne très bien pour une structure de dossier simple.

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

À l’aide de Chrome, la recherche des fichiers d’images dans les liens (comme proposé précédemment) ne fonctionnait pas car elle générait quelque chose comme:

(...) 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>

Peut-être que le moyen le plus fiable est de faire quelque chose comme ceci:

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

Vous ne pouvez pas le faire automatiquement. Votre JS ne peut pas voir les fichiers dans le même répertoire.

Le plus simple est probablement de donner une liste de ces noms d’images à votre JavaScript.

Sinon, vous pourrez peut-être extraire une liste de répertoires du serveur Web à l'aide de JS et l'analyser pour obtenir la liste des images.

0
sync

Dans jQuery, vous pouvez utiliser Ajax pour appeler un script côté serveur. Le script côté serveur trouvera tous les fichiers du dossier et les renverra dans votre fichier html où vous devrez traiter les informations renvoyées.

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

c'est le code qui fonctionne pour moi, ce que je veux, c'est lister les images directement sur ma page pour que vous n'ayez qu'à mettre le répertoire où vous pouvez trouver les images par exemple -> dir = "images /" Je fais une sous-chaîne var pathName = nomfichier.substring (nomfichier.lastIndexOf ('/') + 1); avec lequel je m'assure de simplement apporter le nom des fichiers listés et à la fin je lie mon URL pour le publier dans le corps $ ("body"). append ($ (""));

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

Ajoutez le script suivant:

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

puis créez un fichier js avec les éléments suivants:

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