Question

我试图加载文件夹中的所有图像（我有超过20K），向用户展示（只是尝试构建一个图像随处可见的页面），在页面加载时，使用里面的JS我的HTML。但我无法设法加载图片。 Web控制台上也没有错误。

此代码有什么问题？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    </head>

    <body>
        <script>               
        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 +"'>" );
                        } 
                    });
                }
            });
        </script>
    </body>
</html>

此外，没有JS的其他解决方案也可以实现同样的目标。

提前致谢。

Answer 1

先决条件：调整铬/铬发射器以添加所需的标志，例如; chromium-browser --allow-file-access-from-files或google-chromne --allow-file-access-from-files;见How do I make the Google Chrome flag "--allow-file-access-from-files" permanent?

html，img元素的数量等于文件夹

中的图像文件

<!-- note , `src` attribute not included -->
<img class="image" style="opacity:0.0" alt="1">
<img class="image" style="opacity:0.0" alt="1a">
<img class="image" style="opacity:0.0" alt="1b">
<img class="image" style="opacity:0.0" alt="1c">

然后，您应该能够使用Preloading images in HTML中描述的方法迭代一组图像文件名以连续加载多个图像。

使用XMLHttpRequest()并将responseType设置为Blob，URL.createObjectURL，new Promise()构造函数，Promise.all()

var arr = ["file:///home/user/path/to/image/file-1"
          , "file:///home/user/path/to/image/file-2"];

function loadImages(src) {
  return new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest();
    request.onload = function() {
      $("<img/>", {
        src: URL.createObjectURL(this.response)
      }).on("error", reject)
      .appendTo("body");
      resolve(src + " loaded")
    }
    request.onerror = reject;
    request.open("GET", src);
    request.responseType = "blob";
    request.send(); 
  }) 
}  

Promise.all(arr.map(function(src) {
  return loadImages(src)
}))
.then(function(data) {
   console.log(data)
}, function(err) {
   console.log("error", err)
})

另请参阅jquery-ajax-native，Blob允许从ArrayBuffer

返回jQuery.ajax()或

$.ajax({
    dataType: 'native',
    url: "file:///home/user/path/to/image/file",
    xhrFields: {
      responseType: "blob"
    }
})
.then(function(data) {
  $("<img/>").attr("src", URL.createObjectURL(data))
  .appendTo("body")
})

List<string> diag_right = new List<string>();
diag_right.Add(b3); //Add the string b3
diag_right.Add(b5); //Add the string b5
diag_right.Add(b7); //Add the string b7

if (diag_right.Exists(a => a.Equals("")))
{
    //Find the item (string name, b3, b5, etc.) that was found as matching the blank property
}

Answer 2

在上面列出的代码中，你无法获得在ajax中返回的数据中的任何内容：url：＆＃34; images /＆＃34;是一个文件夹。您需要将url设置为提供相应文件路径列表的内容，例如json响应：

{1:"images/abc.jpg",2:"images/abc.jpg"}

OR

{imagelinks:["images/abc.jpg","images/abc.jpg"]}

然后，您可以将这些文本路径提供给页面上的图像源。

Answer 3

尝试将input type="file"与multiple和webkitdirectory，属性集，accepts属性设置为"image/*"，.change()，{{1}一起使用} loop，IIFE在for循环for

中创建闭包

URL.createObjectURL()

$(":file").change(function(event) {
  var files = this.files;
  for (var i = 0; i < files.length; i++) {
    (function(n) {
      var img = new Image;
      img.onload = function() {
        $("body").append(this)
      }
      img.src = window.URL.createObjectURL(files[n])
    }(i))
  }
})

Answer 4

包含＆＃34;文件夹＆＃34;附加时在文件路径中创建冗余。删除它，它很有效：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <script>               
    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='" + val +"'>" );
                    } 
                });
            }
        });
    </script>
</body>
</html>

使用Javascript从文件加载图像

4 个答案: