我想在图片库中显示位于服务器中的文件夹中的所有图像。
有没有办法只使用 JavaScript 或 JQuery 从文件夹中返回所有图像文件名的列表？
此外，我想仅使用 JavaScript 计算类似文件夹中的图像文件数。
有没有办法仅使用 JavaScript 来计算文件夹中图像文件的数量？
有没有办法只使用 Javascript 从文件夹中返回所有图像文件名的列表？
IT技术
javascript
jquery
2021-02-05 17:23:38
6个回答
不，您不能单独使用 Javascript 来做到这一点。客户端 Javascript 无法像我认为的那样读取目录的内容。
但是，如果您能够向图像目录添加索引页（或配置您的 Web 服务器以显示其索引页）并且您正在从同一服务器提供 Javascript，那么您可以进行 AJAX 调用以获取索引然后解析它。
IE
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"));
});
}
});
这将列出jpg您在 url: 下定义的文件夹中的所有文件，并将它们div作为段落附加到 a中。也可以这样做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 命令，但更简单的解决方案是opendir在服务器端 ( PHP) 中列出您的文件，并将其“吐出”到 HTML 源代码中，以便客户端可以使用它。
下面的代码将做到这一点，
可选 -
- 使用
<a>标签来呈现链接。 使用服务器端 (
PHP)查询更多信息，例如文件大小，
PHP 文件大小提示： 您还可以使用以下方法轻松克服PHP 文件大小的2GB 限制：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' > Split文件名 的文本</a>
因此$(data).find("a:contains(.jpg)") 无法检测到扩展名。
我希望这是有用的
其它你可能感兴趣的问题