如何使用Jquery/Javascript从我的一个文件夹中加载所有图片到我的网页？

Question

如何使用Jquery/Javascript从我的一个文件夹中加载所有图片到我的网页？

javascriptjqueryhtmlimage

66

我在与我的.js文件相同的目录中有一个名为"images"的文件夹。我想使用Jquery/Javascript将"images"文件夹中的所有图像加载到我的html页面中。

由于图像名称不是连续的整数，那我该如何加载这些图像呢？

- rishy

您可以使用**Directory Slider插件**，它可以为您完成这项工作。易于使用和配置。享受吧。 - Thanos

请阅读此文：https://dev59.com/HWw05IYBdhLWcg3w11W0 - Nanhe Kumar

可能是重复的问题：jQuery从目录中提取图像 - Gajus

15个回答

52

使用：

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()逐一遍历它。

注：上面的源代码未经过测试。

- Roy M J

2

这对我有用，但我从变量文件名中删除了.host。所以：var filename = this.href.replace(window.location, "") - evan

2

不要使用:contains，而是使用过滤器来测试多个扩展名。.find("a").filter(function () {return regexp.test($(this).text());}).将regexp定义为var regexp = new Regexp("\.png|\.jpg|\.gif"); - downeyt

大家好，我正在尝试使用相同的示例将5个静态文件（保存在单独的文件夹中的5个不同HTML文件）加载到另一个文件中；但是这些文件无法在该页面中加载。- 有什么建议？ - Tirtha

@Tirtha：你能发布一个演示（jsbin/jsfiddle）吗？ - Roy M J

1

我成功地在本地（运行IIS Express）使其完美运行，并且AJAX调用（我记录了“this”返回完整的“/assets/images/image.jpg”）。但是，当我将其上传到我的Apache服务器时，所有调用（this）都只返回“/image.jpg”，导致它无法在Apache主机上工作。有什么想法吗？ - Matt Brewerton

显示剩余3条评论

10

这是在本页面顶部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

在这个例子中，我添加了更多的内容。

- Bart Hoekstra

一些带有特殊字符的文件名将无法被选择。例如，文件名为“blk100A#01-01”（将不被选择），但文件名为“blk100#01-01”（没有在“#”前面加上“A”）将被选择。能给予帮助吗？ - heng heng

8

如果您想不用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()

- Rainman

6

这里有一种方法来实现它。需要使用一些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中。您可能希望过滤从文件夹中获取的文件。

在php部分得到了一些帮助，来源于1。

- Pnar Sbi Wer

2

$(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。

您可以根据需要更改目录和文件名。

- Siva Shanmugam

1

OP的问题需要“图像名称不是一些连续的整数”。 - runsun

1

这是适用于我的代码，我想直接在我的页面上列出图片，以便您只需放置目录即可找到图片，例如-> dir="images/" 我使用substring 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>

- Sancho Sancho

1

如果你和我一样想从本地文件夹中加载图片，那么有一个非常简单的方法可以用一个很短的Windows批处理文件实现。这种方法利用了使用“>”（覆盖文件）和“>>”（追加到文件）将任何命令的输出发送到文件的能力。

潜在地，你可以像这样将文件名列表输出到纯文本文件中：

dir /B > filenames.txt

然而，读取文本文件需要更多的操作，因此我输出了一个javascript文件，它可以在您的中加载，以创建一个包含所有文件名的全局变量。请注意保留html标签。

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中的可执行文件类型，如果您从一些随机的互联网链接下载，请在运行之前在文本编辑器中打开它们。

如果您正在运行Linux或OSX，则可以做类似于批处理文件的操作，并生成正确格式的Javascript字符串，而无需进行任何mlString faff。

- MrFlamey

为你的笔记点了赞 :D - Anne Douwe

1

根据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
    });
}

- ashish

0

使用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>

- Pedro Reis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

该程序能在本地和线上服务器上都无问题地运行，并且允许您扩展允许的文件扩展名分隔列表：

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 选项，如果你使用其他服务器（如 Node 的 Express），则可以使用此 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')));