如何创建一个函数来循环遍历我的目录中名为“data”的文件夹。它只包含图像文件，并且我会不断地向它添加更多的图像文件。以前，我使用下面的函数来返回一个URL数组：
function _image_urls(){return(
[
"https://images.pexels.com/photos/4050284/pexels-photo-4050284.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?auto=compress&cs=tinysrgb&w=600",
"https://images.pexels.com/photos/2002719/pexels-photo-2002719.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/919606/pexels-photo-919606.jpeg?auto=compress&cs=tinysrgb&w=600",
"https://images.pexels.com/photos/1983038/pexels-photo-1983038.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/1702624/pexels-photo-1702624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/3631430/pexels-photo-3631430.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/135018/pexels-photo-135018.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/161154/stained-glass-spiral-circle-pattern-161154.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
]
)}我正在尝试创建一个函数，返回data文件夹中所有图像的路径数组。我尝试了以下方法：
function _image_urls(){
const image_folder = 'data';
const image_extension = '.jpg';
let image_urls = [];
for (let i = 0; i < 10; i++) {
let image_url = image_folder + i + image_extension;
image_urls.push(image_url);
}
return image_urls;
}
1条答案
按热度按时间dgjrabp21#
看起来这只会返回一个数组，如下所示：
如果这就是您所得到的，那么您需要使用
i作为包含文件名的数组的索引。更大的问题是，首先你是如何获得文件列表的？这通常不是JavaScript自己能做的事情。如果文件存在于服务器上，您需要一些服务器端脚本来实际访问文件夹并输出文件名数组-然后可以通过几种方式将其放入数组中（如果允许服务器端代码处理JS文件，则直接将其写入代码;或者更可能使用XHR来请求文件名，然后在获得响应时填充数组。）
如果您编写这个服务器端脚本，使其将输出格式化为JSON，那么只需使用
JSON.parse()将输出直接转换为数组，而无需迭代响应（如问题中的函数）。OP评论后编辑/更新：
由于您在服务器端使用PHP，因此我将创建一个服务器端脚本，该脚本读取“Data”文件夹的内容并输出JSON格式的字符串，然后可以由前端的JS解析该字符串。
一般来说，这是使用scandir函数完成的。详细信息请参见https://www.php.net/manual/en/function.scandir.php。
其步骤如下：
1.使用scandir获取Data文件夹中的文件数组
1.删除数组中的前两项（.和..）
1.使用json_encode函数将数组转换为JSON格式的字符串
1.重复那个字符串
然后在你有你的JS的页面上你有两个选项：
1.包括上面描述的PHP脚本，使其成为使用JSON.parse（）的JS数组。
1.使用XHR请求PHP脚本，当得到响应时，使用JSON.parse（）将其设置为数组变量。
第一种方法已经过时了，但是非常简单--尽管它要求您的JS代码由PHP解析，这可能是可能的，也可能是不可能的，这取决于您的服务器配置。
第二种方法可能是您应该使用的方法，只要您不介意在页面加载之后填充数组，并且在调用任何依赖于数组的函数之前等待XHR完成。
这里要知道的主要事情是，你想做的事情是不可能只使用JavaScript的，因为JS不能读取服务器上的文件夹的内容，你的JS将需要与一些服务器端代码交互，以读取文件夹的内容到任何数组.