使用JavaScript，将文件夹中的图像名称加载到数组中

Question

在按钮点击时，使用jQuery从文件夹中加载图片名称到数组中。

我有一些代码可以将图片加载到页面中。

其中一个名为images2的文件夹中有20张图片。

我的index.html文件中包含了images2文件夹。

我想修改这段代码，在按钮点击时，它可以将图片的名称加载到imagenames数组中。

imagenames[];

function loadimagenames()
{
var folder = "images2/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="loadimagenames();">loadimage to array</button>

- john

---

你需要编写服务器端代码，读取你的文件夹并将所有图像作为响应返回，这样你就可以在AJax的URL中调用它。 - Nagaraju

@nagaraju 这是针对本地PC应用程序的。有没有一个JS代码可以执行这个功能？ - john

哪个本地PC应用程序？浏览器JS无法访问本地文件。 - Solo

@nagaraju 我不是主机托管，有没有JavaScript中的客户端代码，我的意思是一个函数来获取值？ - john

客户端的JavaScript代码由于安全原因无法访问本地文件系统。想象一下，如果每个网站都可以访问您的私人文件，那将是可怕的。如果您需要执行类似的操作，我建议编写一个客户端（Windows？）应用程序，而不是Web应用程序。 - Mark Baijens

Answer 1

根据Nagaraju所说，我们看到您正在发出ajax调用以请求文件名 - 您的后端语言是什么？ AJAX的目的是向后端（服务器端）语言发送请求以执行某些操作，然后接收新数据（作为响应），然后将其添加到Web页面中。但是，实际上读取所有图像文件的名称并将该列表返回给javascript（客户端）方的是服务器端语言。

大多数服务器都可以使用PHP - 是否适用于您的情况？如果是这样，您需要使用PHP从文件夹请求文件名列表，并在ajax.done（）方法中将其返回给javascript。

如果您正在本地执行此操作，则可能需要安装类似xampp（适用于Windows，Mac和Linux的版本），其中包括apache服务器 （用于显示网站）和PHP和MySQL等 - 完整的Web服务器套件，与Namecheap或GoDaddy的托管计划非常相似。 这里有一个关于如何使用PHP完成您想要的内容的教程。

请注意，在使用xampp时，它会在C:\XAMPP下创建一个文件夹结构 - 您的网站文件位于C:\XAMPP\HTDOCS中。

另请注意，在安装xampp后，打开浏览器，在地址栏中只需键入“localhost” - 就是这样（然后按Enter）。默认示例网站将显示在您的本地机器上 - 文件C:\xampp\htdocs\index.html - 尝试编辑该文件并刷新页面...

还要注意，您可以在c:\xampp\htdocs下创建不同“站点”的子文件夹 - 例如，创建一个简单的测试站点作为c:\xampp\htdocs\bob\index.html，然后在浏览器中查看它作为localhost/bob

更新：

如果您真的想使用JavaScript编写图库应用程序，则仍需要服务器端语言...因此，您可以安装node.js。正如其他人在上面指出的那样，JavaScript本身仅在浏览器中客户端工作，无法访问文件系统。但是，Node.js将JavaScript安装到服务器端，并完全访问Web服务器（例如xampp）的文件系统。

这里有一个教程安装node.js到你的xampp安装。

更新2：

最后注意：为了编写此类应用程序，您需要学习的PHP量并不是很多。它非常类似于javascript，除了以下几点：

1）您的.html文件必须重命名为.php（您现在可以将所有.html文件都进行重命名...我从未遇到过没有PHP的Web服务器，这是在使用各种Web服务器/托管配置为大量客户端服务之后）。立即尝试：将index.html重命名为index.php并刷新-仍然可以正常工作。唯一的区别是现在您可以执行下面的操作（2）。

2）在.php文件中，它只是一个可以处理任何PHP代码的.html文件。 PHP代码始终由<?php //your code goes here ?>标记界定。

3) 所有变量 - 必须 - 以 $ 开始。例如：$var = 'bob'; 或 $x = 1; 或 if($x=='bob'){ echo 'Hello<br>';} 4) 每个语句都必须以 ; 结尾。它不像 JavaScript 那样容易原谅。一个单独的缺少分号就会使你的代码崩溃。

5) 当代码崩溃时，它只是崩溃了。没有错误消息返回到 DevTools 控制台...除非您安装了 PHPConsole 浏览器扩展！

6) 安装 PHPConsole 浏览器扩展。

这大概就是你需要知道的全部了。现在，去使用 PHP 编程吧。你会发现它与 JavaScript 非常相似 - 就像澳大利亚英语和美国英语一样。

- cssyphus

---

感谢@john。为了转述著名律师克拉伦斯·达罗的话，“自从腓尼基人发明了点赞以来，只有一种方式可以表达欣赏。”：） - cssyphus

Answer 2

JavaScript在客户端执行，由于安全原因无法访问本地文件系统。因此，您应编写服务器端代码通过给定的文件夹进行全局搜索，并以JSON格式返回其中的图像，而不是向该文件夹发送ajax请求。

例如：

<?php
function findImagesInFolder()
{
    $folder = $_GET['folder'];
    $images = glob($folder . '/*.{png,jpg,jpeg,gif}', GLOB_BRACE);

    echo json_encode($images);
    exit();
}

- Leander

---

是的，很好的补充。对于用户来说，拥有那段代码会很有帮助。+1 - cssyphus