如何使用 Jquery/Javascript 將我的一個文件夾中的所有圖像加載到我的網頁中

Question

我在與我的 .js 文件相同的目錄中有一個名為“images”的文件夾。 我想使用 Jquery/Javascript 將“圖像”文件夾中的所有圖像加載到我的 html 頁面中。

由於圖像的名稱不是一些連續的整數，我應該如何加載這些圖像？

Answer 1

在本地主機和實時服務器上都可以正常工作，並且允許您擴展允許的文件擴展名的分隔列表：

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')));

Answer 2

用 ：

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：以上源碼未經測試。

Answer 3

這是添加更多文件擴展名的方法，在本頁頂部 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   

在這個例子中，我添加了更多的包含。

Answer 4

這是一種方法。 也涉及做一點 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 部分有一些幫助

Answer 5

如果有興趣在沒有 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()

Answer 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 命令的輸出無法格式化以寫入正確的字符串，因此我在這里找到了解決方法。

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。

Answer 7

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

您可以根據需要更改目錄和文件名。

Answer 8

這是對我有用的代碼，我想要的是直接在我的頁面上列出圖像，這樣您只需要將目錄放在可以找到圖像的位置，例如 -> 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>

Answer 9

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

Answer 10

您不能自動執行此操作。 您的 JS 無法看到與它位於同一目錄中的文件。

最簡單的方法可能是將這些圖像名稱的列表提供給您的 JavaScript。

否則，您可能能夠使用 JS 從 Web 服務器獲取目錄列表並對其進行解析以獲取圖像列表。

Answer 11

在 jQuery 中，您可以使用 Ajax 來調用服務器端腳本。 服務器端腳本將找到文件夾中的所有文件，並將它們返回到您需要處理返回信息的 html 文件中。

Answer 12

您可以使用fs.readdir或fs.readdirSync方法來獲取目錄中的文件名。

這兩種方法的區別在於，第一種方法是異步的，因此您必須提供一個回調函數，該函數將在讀取過程結束時執行。

第二個是同步的，它將返回文件名數組，但它將停止任何進一步的代碼執行，直到讀取過程結束。

之后，您只需遍歷名稱並使用 append 函數，將它們添加到適當的位置。 要查看它是如何工作的，請參閱HTML DOM 和 JS 參考

Answer 13

添加以下腳本：

<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 
*/}); 

Answer 14

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