JavaScript: come caricare tutte le immagini in una cartella?

Question

var img = new Image(); 
img.src = "images/myFolder/myImage.png"; 

Quanto sopra verrà caricato solo myImage.png. Come caricare tutte le immagini di myFolder?

Answer 1

JavaScript non può accedere direttamente ai contenuti di un file system. Dovrai prima passare il contenuto usando uno script sul lato server (scritto in PHP, ecc.).

Quindi, una volta ottenuto ciò, è possibile utilizzare un ciclo nel codice JavaScript per caricarli singolarmente.

Answer 2

È necessario un modo per ottenere l'elenco dei file in quella cartella. Questo può essere definito manualmente come una matrice o recuperato da una richiesta AJAX a uno script sul lato server che elenca i file per te. Ad ogni modo, non esiste un metodo "magico" per ottenere tutte le immagini in una cartella.

Answer 3

Se si dispone di tutti i nomi dei file nella cartella, è necessario scorrere e aprire ogni immagine per nome. Non è possibile caricare direttamente l'intera cartella e non è possibile accedere al file system in Javascript per ottenere i nomi, è necessario passare alla pagina tramite qualcosa come PHP.

Answer 4

Se i nomi delle immagini sono sequenziali come il tuo detto, è possibile creare un ciclo per i nomi, controllando ad ogni iterazione, se esiste l'immagine - e se non lo fa - rompere il ciclo:

var bCheckEnabled = true; 
var bFinishCheck = false; 

var img; 
var imgArray = new Array(); 
var i = 0; 

var myInterval = setInterval(loadImage, 1); 

function loadImage() { 

    if (bFinishCheck) { 
     clearInterval(myInterval); 
     alert('Loaded ' + i + ' image(s)!)'); 
     return; 
    } 

    if (bCheckEnabled) { 

     bCheckEnabled = false; 

     img = new Image(); 
     img.onload = fExists; 
     img.onerror = fDoesntExist; 
     img.src = 'images/myFolder/' + i + '.png'; 

    } 

} 

function fExists() { 
    imgArray.push(img); 
    i++; 
    bCheckEnabled = true; 
} 

function fDoesntExist() { 
    bFinishCheck = true; 
}