I have a folder named "images" in the same directory as my .js file. I want to load all the images from "images" folder into my html page using Jquery/Javascript.
Since, names of images are not some successive integers, how am I supposed to load these images?
在本地主机和实时服务器上都可以正常工作，并且允许您扩展允许的文件扩展名的分隔列表：
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')));
利用 ：
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().
Ps：以上源码未经测试。
这是添加更多文件扩展名的方法，在本页顶部 Roy MJ 给出的示例中。
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
在此示例中，我添加了更多包含。
如果有兴趣在没有 jQuery 的情况下执行此操作 - 这是当前最受好评的答案的纯 JS 变体（来自此处）：
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()
这是一种方法。还涉及做一点 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 命令的输出无法格式化为写入正确的字符串，所以我在这里找到了解决方法。
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。
$(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, ... to 13.jpg。
您可以根据需要更改目录和文件名。
根据 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
});
}
这是对我有用的代码，我想要的是直接在我的页面上列出图像，这样您只需将目录放在可以找到图像的位置，例如 -> 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>
您不能自动执行此操作。您的 JS 看不到与它在同一目录中的文件。
最简单的可能是将这些图像名称的列表提供给您的 JavaScript。
否则，您可能能够使用 JS 从 Web 服务器获取目录列表并对其进行解析以获取图像列表。
在 jQuery 中，您可以使用 Ajax 调用服务器端脚本。服务器端脚本将找到文件夹中的所有文件并将它们返回到您需要处理返回信息的 html 文件中。
您可以使用fs.readdir或fs.readdirSync方法来获取目录中的文件名。
这两种方法的区别在于，第一种是异步的，所以你必须提供一个回调函数，在读取过程结束时执行。
第二个是同步的，它将返回文件名数组，但它将停止您的代码的任何进一步执行，直到读取过程结束。
之后，您只需遍历名称并使用 append 函数，将它们添加到适当的位置。要查看它是如何工作的，请参阅HTML DOM 和 JS 参考
添加以下脚本：
<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>