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来编写这样的应用程序的数量并不是很多。它与javascript非常相似，除了：

1）您的.html文件必须重命名为.php（从现在开始，您当然可以对所有.html文件进行此操作...我从来没有却遇到了一个没有PHP的网络服务器，那是在对许多客户端使用了数十种不同的网络服务器/托管配置之后）。立即尝试：将您的index.html重命名为index.php并刷新-仍然可以正常工作。唯一的区别是，您现在可以执行以下（2）。

2）在.php文件中，它只是一个.html文件，现在可以处理任何PHP代码。始终使用 <?php //your code goes here ?> 标签来描述PHP代码。

3）所有变量-始终-以$开头。例如：$var = 'bob';或$x = 1;或if($x=='bob'){ echo 'Hello<br>';}

4）每个声明必须以;结尾。它不像javascript那样宽容。缺少一个分号将使您的代码崩溃。

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

6）安装PHPConsole浏览器扩展。

这就是您需要了解的所有内容。现在，使用PHP编写程序。您会发现它与javascript非常非常相似-例如Australian v.s.美国英语。

Answer 2

Javascript正在客户端执行，由于安全原因，无法访问本地文件系统。而不是对文件夹执行ajax请求，您应该编写服务器端代码，使其遍历给定文件夹并以JSON格式返回其中的图像。

例如：

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

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

使用JavaScript将图片名称从文件夹加载到数组

2 个答案:

更新：

更新2：