我如何读取文件夹图像和显示html内

How do I Read folder images and display inside html?

本文关键字：图像 显示 html 文件夹 何读取 读取      更新时间：2023-09-26

我想使用JS在html页面(离线)内显示一些图像。我有一个包含index.html的文件夹和一个名为"images"的文件夹，其中包含JPG。如果我有10张图片，显示10张，如果我有3张，在html中显示3张这可能吗?我尝试了很多教程，但都不成功。问候,费尔南多。

我想你不能在你的电脑上浏览从js读取的文件。但是你可以使用HTML5的FileReader API来浏览文件

无法通过在浏览器中打开本地页面列出目录内容。但是，如果这些文件的命名遵循可预测的模式，那么您可以尝试通过"猜测"文件名来显示它们。

例如，假设图像命名为1.jpg, 2.jpg等。脚本将尝试追加图像1…N，只要N.jpg存在，并将在第一个文件名加载失败时终止。

var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
   appendImage();
}
var tryLoadImage = function( index ){
   tempImg.src = 'images/' + index + '.jpg';
}
var appendImage = function(){
   var img = document.createElement('img');
   img.src = tempImg.src;
   document.body.appendChild( img )
   tryLoadImage( index++ )
}
tryLoadImage( index );

你可以用javascript加载图像，这取决于你如何命名文件。

 // create image
 var img = new Image();
 // add src attribute                                   
 img.src = "images/" + filename;
 // when image is loaded, add it to my div
 img.addEventListener("load", function(){
     document.getElementById("mydiv").appendChild(this);
 });

您可以使用ajax实现这一点，就像下面的jQuery示例:

var dir = "Src/themes/base/images/";
var fileextension = ".png";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //List all .png file names in the page
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http://", "");
            $("body").append("<img src='" + dir + filename + "'>");
        });
    }
});

摘自:如何从我的一个文件夹加载所有的图像到我的网页，使用Jquery/Javascript

相关文章：