Question

我是jQuery的新手，正在为我自己的测试项目工作。

我想计算特定文件夹中的所有图片。对于找到的每个图像，我想显示具有唯一ID和图像的div。我想在没有PHP的jQuery中完成所有这些。

图像编号在1到100之间

现在我有：

$.ajax({
url:'http://example.com/images/'+i+'.JPG',
type:'HEAD',
error: function()
{ 
  alert('EMPTY FOLDER');
},
success: function()
{
    count++;
    $('#TARGET').append('<div id="img_div_' + i + '"><img src=" http://example.com/images/' + i + '.JPG"><div>');
}

}）;

并计算图像数量。但是我该如何显示这样的div？

<div id="insert unique id"><img src="insert image"><div>

Answer 1

您可以在ajax成功块中使用jQuery追加它们：

$.ajax({
    url:'http://example.com/images/'+i+'.jpg',
    type:'HEAD',
    error: function()
    { 
      alert('EMPTY FOLDER');
    },
    success: function()
    {
        count++;
        $('#target').append('<div id="img_div_' + i + '"><img src=" http://example.com/images/' + i + '.jpg"><div>');
    }
});

然后只需要一个＆＃34;目标＆＃34;你的HTML中的元素：

<div id="target"></div>

或者，在你的ajax调用之前以类似的方式添加它！

Answer 2

不幸的是，您无法使用javascript计算文件夹中的所有图片。您需要向服务器发出请求，然后服务器将对文件夹中的文件进行计数并将响应返回给您的ajax方法。响应将包含计数，然后可以将其附加到您选择的元素。

在第二次检查和阅读评论时，我看到你从1到10重复，并将每个号码的请求作为文件名。这假设所有图像都是jpgs并以1到10命名。如果文件夹有100000张图像，会发生什么？你打算提出这么多要求吗？

Answer 3

尝试使用"GET"请求以避免请求图像两次（如果存在）; $.when.apply()，$.map()，$.Deferred()，.always()，$.grep()，Blob，URL.createObjectURL

＆＃13;

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var requests = $.when.apply($, $.map(arr, function(n) {
  var dfd = $.Deferred();
  var request = $.ajax({
    url: "http://example.com/images/" + n + ".JPG",
    type: "GET"
  })

  request.always(function(data, textStatus) {
    // return file if found , else `false`    
    dfd.resolve(textStatus !== "error" ? data : false)
  })
  return dfd.promise()
}))
requests.always(function() {
  console.log(arguments)
  // filter `false` values in responses
  var res = $.grep(arguments, Boolean);
    if (res.length) {
      res.forEach(function(img) {
        $("div").append(
          $("<img>", {
            id: id,
            // if images exists , append new image element to `div`
            src: URL.createObjectURL(new Blob([img])) 
          })[0].outerHTML
        )
      })
    } else {
      $("div").html("no images found");
      console.log(res)
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div></div>

＆＃13;

计算文件夹中的图像并显示具有唯一ID的div

3 个答案: