如何数数。使用javascript的本地文件夹中的图像文件

Question

我是 JavaScript 新手，正在尝试简单的网页设计。我怀疑如何使用 js 代码获取存储在本地图像文件夹中的 no.of 图像文件。

我想得到不。动态图像文件，这样即使我们随时在文件夹中添加更多图像，这些图像也会显示在网页上。

function parenting {
  var n=3;
  for(var i=1; i<=n; i++) {
    var img1 = document.createElement('img');
    img1.src = 'images/parenting/'+i+'.jpg';
    document.body.appendChild(img1);
  }
}

在上面的代码中，我给了 n=3 作为默认值。图像文件，但它应该通过代码从图像文件夹中获取。

Answer 1

如果您在 Web 服务器上为图像位置启用目录浏览，那么您可以执行 ajax 请求并迭代结果：

$.ajax({
  url: "images/parenting/",
  success: function(data){
     $(data).find("a:contains(.jpg)").each(function(){
        var filename = this.href.replace(window.location.host, "").replace("http://", "");
        $("body").append("<img src='images/parenting/" + filename + "'>");
     });
  }
});

这是一个普通的 JavaScript 答案：

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == XMLHttpRequest.DONE) {
    if (xmlhttp.status == 200) {
      var n = (xmlhttp.responseText.match(/jpg/g) || []).length;

      for (var i = 1; i <= n; i++) {
        var img1 = document.createElement('img');
        img1.src = 'images/parenting/' + i + '.jpg';
        document.body.appendChild(img1);
      }
    }
  }
};

xmlhttp.open("GET", "images/parenting/", true);
xmlhttp.send();