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

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

---

您好，费尔南多。

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

---

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

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

var dir=“Src/themes/base/images/”；
var fileextension=“.png”；
$.ajax({
//如果文件夹配置为“可浏览”，则将检索该文件夹的内容
网址：dir，
成功：功能（数据）{
//列出页面中的所有.png文件名
$（数据）。查找（“a:包含（+fileextension+））。每个（函数（）{
var filename=this.href.replace（window.location.host“”）.replace（http://“，”）；
$（“正文”）。追加（“”）；
});
}
});

摘自：

---

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

例如，假设图像名为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 );

---

您可以使用php或任何服务器端脚本来获取图像名称，并在其中循环以打印设置了src属性的标记吗？还是仅仅是javascript？只有使用javascript，在没有安装apache的情况下使用php是不容易的？好吧，我使用xampp在我的计算机中有一个本地服务器，这允许您这样做。我不知道你是否可以安装它，如果它是一个个人项目，或者是一个必须在其他计算机上工作的东西…嗯，我不知道如何在平板电脑上安装服务器，在这方面我帮不了你。我有一个安卓平板电脑，它的离线浏览器全屏显示一些图像-上下滚动。我用图像做了一个简单的HTML，效果很好，但很快我就有了40个不同图像数量和数量的表。我的想法是使用智能html检查一些操作系统图像并显示：（如果他要求将图像从本地计算机加载到公共网站，没有用户手动输入是无法完成的。这在js中是不可能的。它实际上倾向于服务器端。我认为在评论中链接到该答案会比粘贴在此处更好。我将此代码插入带有标记的HTML中的何处？我会重新编译。）修复将其粘贴到一个单独的文件中，如app.js，并在结束正文标记之前加载。如是：我将此代码插入带有标记的HTML中的何处？@FernandoLuizdeAlmeida是的，没错，将其放置在标记内的HTML页面中。非常感谢pawel！！这对我很有用，Fernando。然后，我可以帮助你。你可以将此答案标记为已接受所以其他面临类似问题的用户可以在将来找到它；）嗨，pawel，我不知道为什么，但是图像1.jpg被复制了。你有什么想法吗？我尝试使用这个脚本，但什么都没有发生。我如何使用它？有必要使用另一个脚本吗