是否有一种方法可以只使用Javascript从文件夹返回所有图像文件名的列表?

Is there a way to return a list of all the image file names from a folder using only Javascript?

本文关键字：返回 文件夹 Javascript 文件名 列表 图像 一种 方法 是否      更新时间：2023-09-26

我想在图片库中显示位于服务器文件夹中的所有图像。

是否有一种方法返回所有的图像文件名的列表从一个文件夹只使用JavaScript或JQuery?

我还想计算类似文件夹中仅使用JavaScript的图像文件的数量。

是否有任何方法来计数图像文件的数量从一个文件夹只使用JavaScript?

不，仅使用Javascript无法做到这一点。客户端Javascript无法读取目录的内容，我想你问的方式。

然而，如果你能够添加一个索引页(或配置你的web服务器显示索引页)的图像目录，你从同一台服务器上提供Javascript，那么你可以做一个AJAX调用来获取索引，然后解析它。

。

1)在Apache中为yoursite.com上的相关目录启用索引:

http://www.cyberciti.biz/faq/enabling-apache-file-directory-indexing/

2)然后用jQuery获取/解析。您必须弄清楚如何最好地抓取页面，并且几乎肯定有一种更有效的方法来获取整个列表，但是一个例子:

$.ajax({
  url: "http://yoursite.com/images/",
  success: function(data){
     $(data).find("td > a").each(function(){
        // will loop through 
        alert("Found a file: " + $(this).attr("href"));
     });
  }
});

这将列出您在url:下定义的文件夹中的所有jpg文件，并将它们作为段落附加到div。用ul li也可以。

$.ajax({
  url: "YOUR FOLDER",
  success: function(data){
     $(data).find("a:contains(.jpg)").each(function(){
        // will loop through 
        var images = $(this).attr("href");
        $('<p></p>').html(images).appendTo('a div of your choice')
     });
  }
});

No。JavaScript是一种客户端技术，不能在服务器上做任何事情。但是，您可以使用AJAX调用服务器端脚本(例如PHP)，它可以返回您需要的信息。

如果你想使用AJAX，最简单的方法是使用jQuery: 
$.post("someScript.php", function(data) {
   console.log(data); //"data" contains whatever someScript.php returned
});

虽然您可以使用WebSockets运行FTP命令，更简单的解决方案是在服务器端(PHP)使用opendir列出您的文件，并将其"吐槽"到HTML源代码中，因此它将可用于客户端。

下面的代码就是这样做的，

可选-

  • 使用<a>标签显示链接

  • 使用服务器端(PHP)查询更多信息，

    例如

    文件大小,

<子> PHP文件大小: ,你也可以很容易地克服2GB的限制PHP的文件大小使用:AJAX + HEAD请求+ .htaccess规则允许Content-Length访问从客户端。

  • 一个完整的工作示例可以在我的github仓库中找到:download.eladkarako.com

  • 以下是一个精简的(简化的)示例:

<?php
  /* taken from: https://github.com/eladkarako/download.eladkarako.com */
  $path = 'resources';
  $files = [];
  $handle = @opendir('./' . $path . '/');
  while ($file = @readdir($handle)) 
    ("." !== $file && ".." !== $file) && array_push($files, $file);
  @closedir($handle);
  sort($files); //uksort($files, "strnatcasecmp");
  $files = json_encode($files);
  unset($handle,$ext,$file,$path);
?>
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div data-container></div>
  <script>
    /* you will see (for example): 'var files = ["1.bat","1.exe","1.txt"];' if your folder containes those 1.bat 1.exe 1.txt files, it will be sorted too! :) */
    var files = <?php echo $files; ?>;
    files = files.map(function(file){
      return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>'
        .replace(/##FILE##/g,       file)
        .replace(/##EXT##/g,        file.split('.').slice(-1) )
        ;
    }).join("'n<br/>'n");
    document.querySelector('[data-container]').innerHTML = files;
  </script>
</body>
</html>

DOM结果看起来像这样:

<html lang="en-US" dir="ltr"><head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div data-container="">
    <a data-ext="bat" download="1.bat" href="http://download.eladkarako.com/resources/1.bat">1.bat</a>
    <br/>
    <a data-ext="exe" download="1.exe" href="http://download.eladkarako.com/resources/1.exe">1.exe</a>
    <br/>
    <a data-ext="txt" download="1.txt" href="http://download.eladkarako.com/resources/1.txt">1.txt</a>
    <br/>
  </div>
  <script>
    var files = ["1.bat","1.exe","1.txt"];
    files = files.map(function(file){
      return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>'
        .replace(/##FILE##/g,       file)
        .replace(/##EXT##/g,        file.split('.').slice(-1) )
        ;
    }).join("'n<br/>'n");
    document.querySelector('[data-container').innerHTML = files;
  </script>

</body></html>

许多技巧都有效，但是Ajax请求将文件名分割为19个字符?查看ajax请求的输出，可以看到:

文件名可以进入href属性，但$(this).attr("href")使用<a href='full/file/name' >拆分文件名</a>的文本

因此$(data).find("a:contains(.jpg)")无法检测扩展名。

我希望这是有用的

恕我直言，Edizkan Adil Ata的想法实际上是最合适的方法。它提取锚标记的url并将它们放在不同的标记中。如果你不想让页面访问者看到锚，那么就用JQuery或CSS中的display: none;将它们全部.hide()。

也可以执行预取，像这样:

<link rel="prefetch" href="imagefolder/clouds.jpg" />

这样你就不必隐藏它，并且仍然可以提取到图像的路径。

相关文章：