javascript - 使用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>

Answer 1

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

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

如果您在本地执行此操作，那么您可能需要安装类似 xampp 的软件。 (有适用于 Windows、Mac 和 Linux 的版本)，其中包括 apache server (用于显示网站) 以及 PHP 和 MySQL 等 - 一个完整的网络服务器套件，与您从 Namecheap 或 GoDaddy 的托管计划中获得的非常相似。

Here is a tutorial for doing what you wish in 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，可以完全访问网络服务器(例如 xampp)的文件系统。

Here is a tutorial用于在您的 xampp 安装上安装 node.js。

更新 2:

最后说明:您需要学习使用 PHP 来编写此类应用程序的 PHP 数量并不多。它与 javascript 非常相似，除了:

1) 你的 .html文件必须重命名为 .php (从现在开始，您当然可以对所有 .html 文件执行此操作...我从未遇到过没有 PHP 的网络服务器，那是在为 scads 使用数十种不同的网络服务器/托管配置之后客户)。立即尝试:只需将 index.html 重命名为 index.php 并刷新 - 仍然有效。唯一的区别是现在您可以执行下面的 (2)。

2) 在 .php 内文件，它只是一个 .html现在可以处理任何 PHP 代码的文件。 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 非常非常相似——就像 Australian v.s.美国英语。