使用文件夹中的图像在 Javascript 中创建一个数组答案

【问题标题】：Make an array in Javascript with images from a folder使用文件夹中的图像在 Javascript 中创建一个数组
【发布时间】：2014-03-08 20:54:35
【问题描述】：

我想使用 JS 浏览文件夹中的图像，并且我想在文件夹中创建一个文件数组。我不知道该怎么做...我想制作数组 |var images|并摆脱我手动将它们放在那里的链接。

<html>
<head>
<title>Ranking Page</title>
<script language="Javascript">

var images = [
    "http://dummyimage.com/600x400/000/fff&text=two",

    "http://dummyimage.com/600x400/000/fff&text=one"

    ];
var iIndex;
var iLen = images.length;

function fn_keydown(event) {
    var img = document.getElementById("wrapper").childNodes[1];
    if (event.keyCode === 39) {
        iIndex = (iIndex + 1) >= iLen ? 0 : iIndex + 1;
    } else if (event.keyCode === 37) {
        iIndex = (iIndex - 1) < 0 ? iLen-1 : iIndex - 1;
    }
    img.setAttribute("src", images[iIndex]);
}
window.onkeydown = fn_keydown;
window.onload = function() {
    iIndex = iLen;
    var vEvent = {
            keyCode : 39
        };
    fn_keydown(vEvent);
}

</script>
</head>
<body>
<div id="wrapper">
    <img />
</div>

</body>
</html>

【问题讨论】：

您的图片来源是什么？有没有获取文件名的api或方法？
图片在同一台服务器上。是的，我可以做一些事情来将图像从 1 重命名为 100.jpg
您想要一个“文件数组”而不是“链接”数组（实际上是 URL）？ “文件”是什么意思？在运行时应该如何表示？那么你想用这样的文件做什么呢？读取二进制内容？在 HTML 中链接到它们？
发现或创建一个模式，然后循环遍历它。重命名图像可能是一种解决方案（除非名称很重要）。或者创建一个服务器脚本来按位置提供图像：image.php?no=1 // return image n°1 in folder.

标签： javascript image glob

【解决方案1】：

您无法使用 JavaScript 执行此操作，因为它无法访问计算机的文件系统。这是因为 JavaScript 在设计时就考虑到了安全性。

您需要为此使用服务器端语言，例如 asp 或 php。您将能够使用正确的安全权限访问文件系统并在服务器上构建您的 javaScript 数组代码。当页面加载时，您的图像路径将存在于网页中，然后您可以在您的 javaScript 中对它们执行您想要的操作。

【讨论】：