元素传播

Question

vhey大家好，我创建了一个元素populator，它需要某些元素，将它们包装在html标签中并将它们附加到一个容器中。我有的问题，如果有的话，更有趣的是每个图像都要自动输入。有没有办法从文件夹中检索所有图像并将它们加载到数组中？

我有这样的代码，至极的作品，但手动输入：

$(window).on('load', function() { 

    var gallery = document.getElementById("grid"); 
    var images = [ 
     "./imgs/galeria/0.jpg", 
     "./imgs/galeria/1.jpg", 
     "./imgs/galeria/2.jpg", 
     "./imgs/galeria/3.jpg", 
     "./imgs/galeria/4.jpg", 
     "./imgs/galeria/7.jpg", 
     "./imgs/galeria/6.jpg", 
     "./imgs/galeria/5.jpg", 
     "./imgs/galeria/8.jpg", 
     "./imgs/galeria/9.jpg", 
     "./imgs/galeria/10.jpg", 
     "./imgs/galeria/11.jpg", 
     "./imgs/galeria/12.jpg", 
     "./imgs/galeria/13.jpg", 
     "./imgs/galeria/14.jpg", 
     "./imgs/galeria/15.jpg", 
     "./imgs/galeria/16.jpg", 
     "./imgs/galeria/17.jpg", 
     "./imgs/galeria/18.jpg", 
     "./imgs/galeria/19.jpg", 
     "./imgs/galeria/20.jpg" 
    ]; 

    for (var i = 0; i < images.length; i++) { 

     var thumbnailWrapper = document.createElement("div"); 

     thumbnailWrapper.className = "thumbnail-wrapper"; 

     var thumbnail = document.createElement("div"); 

     thumbnail.className = "thumbnail"; 

     thumbnail.dataset.source = "./imgs/galeria/" + i + ".jpg"; 

     thumbnailWrapper.appendChild(thumbnail); 

     gallery.appendChild(thumbnailWrapper); 
    } 

    var thumb = document.getElementsByClassName('thumbnail'); 
    // console.log(thumb); 

    for (j = 0; j < images.length; j++) { 
     // $(thumb[j]).attr('src', images[j]); 
     $(thumb[j]).css('background-image', 'url(./imgs/galeria/thumbs/' + j + 'tbm.jpg)'); 
     // console.log(j); 
     // console.log(images[j]); 
    } 

你可以看到脚本在本website我的“GALERIA”一节中提出

编辑动作：或许真的与阿贾克斯？我想保持php等于 编辑2：我想使它与ajax，这是现在正确的代码

Answer 1

您不能使用客户端JavaScript扫描服务器上的文件夹。如果你不知道该文件夹包含什么文件，那么AJAX本身并不适用。

您必须使用服务器端代码（例如PHP）来查找文件夹中的所有文件，并将它们以某种方式传递给客户端。这是我看到的唯一途径。

这种方法可以工作：

$images = glob('imgs/galeria/*.jpg'); 

echo '<div id="grid">'; 

foreach ($images as $key => $image) { 
    echo '<div class="thumbnail-wrapper">'; 
    echo '<div 
    class="thumbnail" 
    data-source="' . $image . '" 
    style="background-image: url(imgs/galeria/thumbs/' . $key . 'tbm.jpg)" 
    ></div>'; 
    echo '</div>'; 
} 

echo '</div>'; 

我希望这就像你的JavaScript代码一样。