如何使用 Jquery/Javascript 将我的一个文件夹中的所有图像加载到我的网页中
Posted
技术标签:
【中文标题】如何使用 Jquery/Javascript 将我的一个文件夹中的所有图像加载到我的网页中【英文标题】：How to load all the images from one of my folder into my web page, using Jquery/Javascript 【发布时间】：2013-08-31 02:13:33 【问题描述】：我在 .js 文件所在的目录中有一个名为“images”的文件夹。我想使用 Jquery/javascript 将“images”文件夹中的所有图像加载到我的 html 页面中。
由于图像的名称不是一些连续的整数，我应该如何加载这些图像？
【问题讨论】：
您可以使用 Directory Slider plugin 来为您完成这项工作。易于使用和配置。享受 阅读此***.com/questions/6994212/… jQuery pull images from directory的可能重复 【参考方案1】：使用：
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 文件名中删除了 .host。所以：var filename = this.href.replace(window.location, "")
不使用 :contains，而是使用过滤器来测试多个扩展 .find("a").filter(function () return regexp.test($(this).text());). 将正则表达式定义为 var regexp = new Regexp("\.png|\.jpg|\.gif");
某些带有特殊字符的文件名不会被选中。例如 filename="blk100A#01-01"（不会被选中），但是 filename="blk100#01-01"（会被选中）（在 '#' 之前没有 'A'）..可以帮忙吗？跨度>
大家好，我正在尝试使用相同的示例将 5 个静态文件（5 个不同的 html 文件保存在单独的文件夹中）加载到另一个文件；但是文件无法在该页面中加载。 - 任何建议。
我设法让它在本地（运行 IIS Express）和 AJAX 调用（我注销 this 返回完整的“/assets/images/image.jpg”）像魅力一样工作。但是当我将它上传到我的 Apache 服务器时，所有调用 (this) 返回的是“/image.jpg”，导致它无法在 Apache 主机上运行。有什么想法吗？【参考方案2】：
您无法自动执行此操作。你的 JS 看不到它所在目录下的文件。
最简单的方法可能是将这些图像名称的列表提供给您的 JavaScript。
否则，您也许可以使用 JS 从 Web 服务器获取目录列表并对其进行解析以获取图像列表。
【讨论】：
【参考方案3】：在 jQuery 中，您可以使用 Ajax 调用服务器端脚本。服务器端脚本将查找文件夹中的所有文件并将它们返回到您需要处理返回信息的 html 文件中。
【讨论】：
【参考方案4】：您可以使用fs.readdir 或fs.readdirSync 方法获取目录中的文件名。
这两种方法的区别在于，第一种是异步的，所以你必须提供一个回调函数，在读取过程结束时执行。
第二个是同步的，它会返回文件名数组，但它会停止任何进一步的代码执行，直到读取过程结束。
之后，您只需遍历名称并使用 append 函数，将它们添加到适当的位置。要查看它是如何工作的，请参阅HTML DOM and JS reference
【讨论】：
【参考方案5】：这是一种方法。还需要做一点 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 部分的帮助
【讨论】：
【参考方案6】：如果像我一样，您想从自己机器上的本地文件夹加载图像，那么有一种简单的方法可以使用非常短的 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。
【讨论】：
投你的票：D【参考方案7】：这是添加更多文件扩展名的方法，在本页顶部 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
在此示例中，我添加了更多包含。
【讨论】：
某些带有特殊字符的文件名不会被选中。例如 filename="blk100A#01-01" （不会被选择），但是 filename="blk100#01-01" （将被选择）（在 '#' 之前没有 'A'）..可以帮忙吗？跨度> 【参考方案8】：$(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。
您可以随意更改目录和文件名。
【讨论】：
OP的问题要求“图像名称不是一些连续的整数”【参考方案9】：在本地主机和实时服务器上都可以正常工作，并允许您扩展允许的文件扩展名的分隔列表：
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')));
【讨论】：
这应该是公认的答案..这是真正有效的完美解决方案..而其他人则失败了.. @RokoC.Buljan 我无法让它工作。我在我的 html 文件中使用这个脚本，在<script></script> 标签内。有什么想法吗？
嗯，它是 JQuery 人，而不是 Javascript，使用这样的总和 $(document).ready(function() 这是基本的 jquery 代码编写场所
在我的情况下不起作用 --- 在 Chrome 中出现错误：file:///<my_path>/images/. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
有人能解释一下“a”指的是什么吗？我有一个带有 .pngs 的文件夹，但没有得到任何结果。当我console.log(data) 我得到一个很长的 html 文档响应并且图像列表显示在末尾为<script>addRow("image1.png","image1.png",false,"","");</script> <script>addRow("image2.png","image2.png",false,"","");</script>【参考方案10】：
添加以下脚本：
<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
*/);
【讨论】：
【参考方案11】：使用 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>【讨论】：
【参考方案12】：这是对我有用的代码，我想要的是直接在我的页面上列出图像，这样您只需将目录放在可以找到图像的位置，例如 -> 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>
【讨论】：
【参考方案13】：根据 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
);
【讨论】：
【参考方案14】：如果有兴趣在不使用 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()
【讨论】：
以上是关于如何使用 Jquery/Javascript 将我的一个文件夹中的所有图像加载到我的网页中的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery/javascript 将文本插入 json [重复]
WordPress 插件开发 - 如何使用 JQuery / JavaScript？
如何使用 Jquery/Javascript 按下键盘 [重复]
如何使用 jquery\javascript 从 firefox 浏览器打印 PDF 文档？