使用 Javascript 从文件加载图像

Loading images from file with Javascript

本文关键字：加载 图像 文件 Javascript 使用      更新时间：2023-09-26

我正在尝试加载文件夹中的所有图像（我有超过 20K），以向用户显示它们（只是尝试构建一个到处都有图像的页面），在页面加载时，在我的 HTML 中使用 JS。但是我无法加载图像。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的其他解决方案也值得赞赏。

提前谢谢。

先决条件：调整铬/铬启动器以添加所需的标志，例如; chromium-browser --allow-file-access-from-files或google-chromne --allow-file-access-from-files ;请参阅如何使谷歌浏览器标志"--允许文件访问从文件"永久化？

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">

然后，您应该能够使用在 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，它允许从jQuery.ajax()返回Blob或ArrayBuffer 

$.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")
})

尝试将 input type="file" 与 multiple 和 webkitdirectory 、属性集、属性集、accepts属性设置为 "image/*" 、.change() 、for循环、IIFE 在循环中创建闭包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))
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file" accepts="image/*" multiple webkitdirectory />

在上面列出的代码中，你不可能从 ajax 中返回的数据中获取任何内容，因为 url："images/" 是一个文件夹。您需要将 url 设置为提供相应文件路径列表的内容，例如 json 响应：

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

或

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

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

追加时包含"文件夹"会在文件路径中创建冗余。删除它，它工作得很好：

<!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>
相关文章：