我在 .js 文件所在的目录中有一个名为“images”的文件夹。我想使用 Jquery/Javascript 将“images”文件夹中的所有图像加载到我的 html 页面中。
由于图像的名称不是一些连续的整数，我应该如何加载这些图像？
【问题讨论】：
标签： javascript jquery html image
使用：
var dir = "Src/themes/base/images/";
var fileextension = ".png";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function (data) {
//List all .png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='" + dir + filename + "'>");
});
}
});
如果你有其他扩展，你可以把它变成一个数组，然后使用in_array()一个一个地遍历。
P.s : 以上源码未经测试。
【讨论】：
var filename = this.href.replace(window.location, "")
.find("a").filter(function () {return regexp.test($(this).text());}). 将正则表达式定义为 var regexp = new Regexp("\.png|\.jpg|\.gif");
this 返回完整的“/assets/images/image.jpg”）像魅力一样工作。但是当我将它上传到我的 Apache 服务器时，所有调用 (this) 返回的是“/image.jpg”，导致它无法在 Apache 主机上运行。有什么想法吗？
您无法自动执行此操作。你的 JS 看不到它所在目录下的文件。
最简单的方法可能是将这些图像名称的列表提供给您的 JavaScript。
否则，您也许可以使用 JS 从 Web 服务器获取目录列表并对其进行解析以获取图像列表。
【讨论】：
在 jQuery 中，您可以使用 Ajax 调用服务器端脚本。服务器端脚本将查找文件夹中的所有文件并将它们返回到您需要处理返回信息的 html 文件中。
【讨论】：
您可以使用fs.readdir 或fs.readdirSync 方法获取目录中的文件名。
这两种方法的区别在于，第一种是异步的，所以你必须提供一个回调函数，在读取过程结束时执行。
第二个是同步的，它会返回文件名数组，但它会停止任何进一步的代码执行，直到读取过程结束。
之后，您只需遍历名称并使用 append 函数，将它们添加到适当的位置。要查看它是如何工作的，请参阅HTML DOM and JS reference
【讨论】：
这是一种方法。还需要做一点 PHP。
PHP部分：
$filenameArray = [];
$handle = opendir(dirname(realpath(__FILE__)).'/images/');
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
array_push($filenameArray, "images/$file");
}
}
echo json_encode($filenameArray);
jQuery部分：
$.ajax({
url: "getImages.php",
dataType: "json",
success: function (data) {
$.each(data, function(i,filename) {
$('#imageDiv').prepend('<img src="'+ filename +'"><br>');
});
}
});
所以基本上你做一个 PHP 文件来将图像文件名列表作为 JSON 返回给你，使用 ajax 调用获取该 JSON，并将它们预先/附加到 html。您可能想要过滤从文件夹中抓取的文件。
从1获得了一些关于 php 部分的帮助
【讨论】：
如果像我一样，您想从自己机器上的本地文件夹加载图像，那么有一种简单的方法可以使用非常短的 Windows 批处理文件来完成。这使用了使用 >（覆盖文件）和 >>（附加到文件）将任何命令的输出发送到文件的能力。
您可以像这样将文件名列表输出到纯文本文件：
dir /B > filenames.txt
但是，读取文本文件需要更多的麻烦，所以我输出了一个 javascript 文件，然后可以将其加载到您的文件中以创建一个包含所有文件名的全局变量。
echo var g_FOLDER_CONTENTS = mlString(function() { /*! > folder_contents.js
dir /B images >> folder_contents.js
echo */}); >> folder_contents.js
这个奇怪的函数带有注释的原因是为了绕过Javascript中多行字符串的限制。 dir 命令的输出无法格式化写入正确的字符串，所以我找到了解决方法here。
function mlString(f) {
return f.toString().
replace(/^[^\/]+\/\*!?/, '').
replace(/\*\/[^\/]+$/, '');
}
在生成的 javascript 文件运行之前将其添加到您的主代码中，然后您将拥有一个名为 g_FOLDER_CONTENTS 的全局变量，它是一个包含 dir 命令输出的字符串。然后可以对其进行标记，您将获得一个文件名列表，您可以使用它来做您喜欢的事情。
var filenames = g_FOLDER_CONTENTS.match(/\S+/g);
下面是一个例子：image_loader.zip
示例中run.bat生成Javascript文件并打开index.html，所以不需要自己打开index.html。
注意：.bat 是 Windows 中的一种可执行类型，因此如果您是从类似这样的某个随机 Internet 链接下载，请在运行前在文本编辑器中打开它们。
如果您运行的是 Linux 或 OSX，您可能可以执行与批处理文件类似的操作并生成格式正确的 javascript 字符串，而无需任何 mlString faff。
【讨论】：
这是添加更多文件扩展名的方法，在本页顶部 Roy M J 给出的示例中。
var fileextension = [".png", ".jpg"];
$(data).find("a:contains(" + (fileextension[0]) + "), a:contains(" + (fileextension[1]) + ")").each(function () { // here comes the rest of the function made by Roy M J
在此示例中，我添加了更多包含。
【讨论】：
$(document).ready(function(){
var dir = "test/"; // folder location
var fileextension = ".jpg"; // image format
var i = "1";
$(function imageloop(){
$("<img />").attr('src', dir + i + fileextension ).appendTo(".testing");
if (i==13){
alert('loaded');
}
else{
i++;
imageloop();
};
});
});
对于这个脚本，我将文件夹中的图像文件命名为 1.jpg、2.jpg、3.jpg、... 到 13.jpg。
您可以随意更改目录和文件名。
【讨论】：
在本地主机和实时服务器上都可以正常工作，并允许您扩展允许的文件扩展名的分隔列表：
var folder = "images/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
通知
Apache 服务器默认开启Option Indexes - 如果您使用另一个服务器，例如 Express for Node，您可以使用此 NPM 包来实现上述功能： https://github.com/expressjs/serve-index
如果您想要列出的文件在 /images 中而不是在 server.js 中，您可以添加如下内容：
const express = require('express');
const app = express();
const path = require('path');
// Allow assets directory listings
const serveIndex = require('serve-index');
app.use('/images', serveIndex(path.join(__dirname, '/images')));
【讨论】：
<script></script> 标签内。有什么想法吗？
file:///<my_path>/images/. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
console.log(data) 我得到一个很长的 html 文档响应并且图像列表显示在末尾为<script>addRow("image1.png","image1.png",false,"","");</script> <script>addRow("image2.png","image2.png",false,"","");</script>
添加以下脚本：
<script type="text/javascript">
function mlString(f) {
return f.toString().
replace(/^[^\/]+\/\*!?/, '');
replace(/\*\/[^\/]+$/, '');
}
function run_onload() {
console.log("Sample text for console");
var filenames = g_FOLDER_CONTENTS.match(/\S+/g);
var fragment = document.createDocumentFragment();
for (var i = 0; i < filenames.length; ++i) {
var extension = filenames[i].substring(filenames[i].length-3);
if (extension == "png" || extension == "jpg") {
var iDiv = document.createElement('div');
iDiv.id = 'images';
iDiv.className = 'item';
document.getElementById("image_div").appendChild(iDiv);
iDiv.appendChild(fragment);
var image = document.createElement("img");
image.className = "fancybox";
image.src = "images/" + filenames[i];
fragment.appendChild(image);
}
}
document.getElementById("images").appendChild(fragment);
}
</script>
然后使用以下内容创建一个 js 文件：
var g_FOLDER_CONTENTS = mlString(function() { /*!
1.png
2.png
3.png
*/});
【讨论】：
使用 Chrome，搜索链接中的图像文件（如前所述）不起作用，因为它会生成如下内容：
(...) i18nTemplate.process(document, loadTimeData);
</script>
<script>start("current directory...")</script>
<script>addRow("..","..",1,"170 B","10/2/15, 8:32:45 PM");</script>
<script>addRow("fotos-interessantes-11.jpg","fotos-interessantes-> 11.jpg",false,"","");</script>
也许最可靠的方法是这样做：
var folder = "img/";
$.ajax({
url : folder,
success: function (data) {
var patt1 = /"([^"]*\.(jpe?g|png|gif))"/gi; // extract "*.jpeg" or "*.jpg" or "*.png" or "*.gif"
var result = data.match(patt1);
result = result.map(function(el) { return el.replace(/"/g, ""); }); // remove double quotes (") surrounding filename+extension // TODO: do this at regex!
var uniqueNames = []; // this array will help to remove duplicate images
$.each(result, function(i, el){
var el_url_encoded = encodeURIComponent(el); // avoid images with same name but converted to URL encoded
console.log("under analysis: " + el);
if($.inArray(el, uniqueNames) === -1 && $.inArray(el_url_encoded, uniqueNames) === -1){
console.log("adding " + el_url_encoded);
uniqueNames.push(el_url_encoded);
$("#slider").append( "<img src='" + el_url_encoded +"' alt=''>" ); // finaly add to HTML
} else{ console.log(el_url_encoded + " already in!"); }
});
},
error: function(xhr, textStatus, err) {
alert('Error: here we go...');
alert(textStatus);
alert(err);
alert("readyState: "+xhr.readyState+"\n xhrStatus: "+xhr.status);
alert("responseText: "+xhr.responseText);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>【讨论】：
这是对我有用的代码，我想要的是直接在我的页面上列出图像，这样您只需将目录放在可以找到图像的位置，例如 -> dir = "images /"
我做了一个子字符串var pathName = filename.substring (filename.lastIndexOf ('/') + 1);
我确保只带上列出的文件的名称，最后我链接我的 URL 以在正文中发布它
$ ("body"). append ($ ("<img src =" + dir + pathName + "> </ img>"));
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.6.3.min.js"></script>
<script>
var dir = "imagenes/";
var fileextension = ".jpg";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function (data) {
//Lsit all png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.pathname, "").replace("http://", "");
var pathName = filename.substring(filename.lastIndexOf('/') + 1);
$("body").append($("<img src=" + dir + pathName + "></img>"));
console.log(dir+pathName);
});
}
});
</script>
</head>
<body>
<img src="1_1.jpg">
</body>
</html>
【讨论】：
根据 Roko C. Buljan 的回答，我创建了这个从文件夹及其子文件夹中获取图像的方法。这可能需要一些错误处理，但适用于简单的文件夹结构。
var findImages = function(){
var parentDir = "./Resource/materials/";
var fileCrowler = function(data){
var titlestr = $(data).filter('title').text();
// "Directory listing for /Resource/materials/xxx"
var thisDirectory = titlestr.slice(titlestr.indexOf('/'), titlestr.length)
//List all image file names in the page
$(data).find("a").attr("href", function (i, filename) {
if( filename.match(/\.(jpe?g|png|gif)$/) ) {
var fileNameWOExtension = filename.slice(0, filename.lastIndexOf('.'))
var img_html = "<img src='{0}' id='{1}' alt='{2}' width='75' height='75' hspace='2' vspace='2' onclick='onImageSelection(this);'>".format(thisDirectory + filename, fileNameWOExtension, fileNameWOExtension);
$("#image_pane").append(img_html);
}
else{
$.ajax({
url: thisDirectory + filename,
success: fileCrowler
});
}
});}
$.ajax({
url: parentDir,
success: fileCrowler
});
}
【讨论】：
如果有兴趣在不使用 jQuery 的情况下执行此操作 - 这是当前最受好评的答案的纯 JS 变体 (from here)：
var xhr = new XMLHttpRequest();
xhr.open("GET", "/img", true);
xhr.responseType = 'document';
xhr.onload = () => {
if (xhr.status === 200) {
var elements = xhr.response.getElementsByTagName("a");
for (x of elements) {
if ( x.href.match(/\.(jpe?g|png|gif)$/) ) {
let img = document.createElement("img");
img.src = x.href;
document.body.appendChild(img);
}
};
}
else {
alert('Request failed. Returned status of ' + xhr.status);
}
}
xhr.send()
【讨论】：