Cómo cargar todas las imágenes de una de mis carpetas en mi página web, usando Jquery/Javascript
Tengo una carpeta llamada "imágenes" en el mismo directorio que mi archivo .js. Quiero cargar todas las imágenes de la carpeta "imágenes" en mi página html usando Jquery/Javascript.
Dado que los nombres de las imágenes no son números enteros sucesivos, ¿cómo se supone que debo cargar estas imágenes?
Funciona tanto en localhost como en servidor en vivo sin problemas y le permite ampliar la lista delimitada de extensiones de archivos permitidas:
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 +"'>" );
}
});
}
});
AVISO
El servidor ApacheOption Indexes está activado de forma predeterminada; si usa otro servidor como, por ejemplo, Express para Node , puede usar este paquete NPM para que funcione lo anterior: https://github.com/expressjs/serve-index
Si los archivos que desea que aparezcan en la lista se encuentran /imagesdentro de su server.js, puede agregar algo como:
const express = require('express');
const app = express();
const path = require('path');
// Allow assets directory listings
const serveIndex = require('serve-index');
app.use('/images', serveIndex(path.join(__dirname, '/images')));
Usar :
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 tiene otras extensiones, puede convertirla en una matriz y luego revisarla una por una usando in_array().
Ps: el código fuente anterior no está probado.
Esta es la forma de agregar más extensiones de archivo, en el ejemplo dado por Roy MJ en la parte superior de esta página.
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
En este ejemplo he agregado más contenidos.
Si está interesado en hacer esto sin jQuery, aquí hay una variante JS pura ( desde aquí ) de la respuesta actualmente más votada:
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()
Aquí tienes una forma de hacerlo. También implica hacer un poco de PHP.
La parte de 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 parte de jQuery:
$.ajax({
url: "getImages.php",
dataType: "json",
success: function (data) {
$.each(data, function(i,filename) {
$('#imageDiv').prepend('<img src="'+ filename +'"><br>');
});
}
});
Básicamente, crea un archivo PHP para devolverle la lista de nombres de archivos de imágenes como JSON, toma ese JSON usando una llamada ajax y lo antepone/añade al html. Probablemente quieras filtrar los archivos que tomas de la carpeta.
Tuve ayuda en la parte php de 1