Question

我想使用JS在html页面（offLine）中显示一些图像。我有一个带有index.html的文件夹和一个名为“images”的文件夹，里面有JPG。如果我有10个图像，则显示10，如果我在html中有3个显示3 这可能吗？我尝试了很多教程，但没有成功。此致，费尔南多。

Answer 1

我认为您无法在计算机上浏览js中的读取文件。但是，您可以使用HTML5的FileReader API浏览文件。

Answer 2

您可以使用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);
 });

Answer 3

你可以使用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 + "'>");
        });
    }
});

取自： How to load all the images from one of my folder into my web page, using Jquery/Javascript

Answer 4

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

例如，假设图像被命名为1.jpg，2.jpg等。只要N.jpg存在，脚本就会尝试附加图像1 ... N，并且会在第一个无法加载的文件名时终止。

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 );

如何读取文件夹图像并在html中显示？

4 个答案: