Question

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

有没有办法只使用JavaScript或JQuery从文件夹中返回所有图像文件名列表？

另外，我想仅使用JavaScript计算类似文件夹中的图像文件数。

有没有办法只用JavaScript来计算文件夹中的图像文件数量？

Answer 1

不，你不能单独使用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"));
     });
  }
});

Answer 2

这将列出您在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')

     });
  }
});

Answer 3

没有。 JavaScript是一种客户端技术，无法在服务器上执行任何操作。但是，您可以使用AJAX调用服务器端脚本（例如PHP），该脚本可以返回您需要的信息。

如果你想使用AJAX，最简单的方法就是利用jQuery：

$.post("someScript.php", function(data) {
   console.log(data); //"data" contains whatever someScript.php returned
});

Answer 4

虽然您可以使用WebSockets运行FTP命令，更简单的解决方案是在服务器端（opendir）使用PHP列出您的文件，并将其“吐出”到HTML源代码中，以便客户端可以使用。

以下代码就是这样做的，

可选 -

使用<a>标记来显示链接。
使用服务器端（PHP），
查询更多信息
例如文件大小，

_{PHP filesize 提示：您还可以使用：AJAX + HEAD请求+轻松克服PHP的文件大小 2GB限制。 htaccess规则允许Content-Length从客户端访问。}

可在我的github repository: 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>

Answer 5

许多技巧都有效，但Ajax请求将文件名拆分为19个字符？查看ajax请求的输出以查看：

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

的文本

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

我希望这很有用

Answer 6

恕我直言，Edizkan Adil Ata的想法实际上是最恰当的方式。它提取锚标记的URL并将它们放在不同的标记中。如果您不想让页面访问者看到锚点，那么只需.hide()使用JQuery或CSS中的display: none;。

您也可以执行预取，如下所示：

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

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

有没有办法只使用Javascript从文件夹中返回所有图像文件名列表？

6 个答案: