60

.js ファイルと同じディレクトリに「images」という名前のフォルダーがあります。Jquery/Javascript を使用して、「images」フォルダからすべての画像を html ページにロードしたいと考えています。

画像の名前は連続する整数ではないため、これらの画像をどのようにロードすればよいですか?

4

14 に答える 14

73

localhost とライブ サーバーの両方で問題なく動作し、許可されたファイル拡張子の区切りリストを拡張できます。 

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

一覧表示したいファイルが/imagesserver.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')));
于 2015-10-05T02:39:23.323 に答える
10

これは、このページの上部にある 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

この例では、contains をさらに追加しました。

于 2014-05-24T12:34:58.817 に答える
6

ここにそれを行う1つの方法があります。少し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部分でいくつかの助けがありました

于 2014-03-15T06:07:04.147 に答える
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。

ディレクトリ名とファイル名は自由に変更できます。

于 2015-08-06T10:16:34.120 に答える
2

私の場合のように、自分のマシンのローカル フォルダーから画像を読み込みたい場合は、非常に短い 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 ファイルが実行される前にこれをメイン コードに追加すると、dir コマンドからの出力を含む文字列である g_FOLDER_CONTENTS というグローバル変数が作成されます。これをトークン化すると、ファイル名のリストが得られます。これを使用して、好きなことを行うことができます。

var filenames = g_FOLDER_CONTENTS.match(/\S+/g);

すべてをまとめた例を次に示します: image_loader.zip

この例では、run.batが Javascript ファイルを生成し、index.html を開くため、自分で index.html を開く必要はありません。

注: .bat は Windows で実行可能なタイプであるため、このようなランダムなインターネット リンクからダウンロードする場合は、実行する前にテキスト エディターで開いてください。

Linux または OSX を実行している場合は、おそらくバッチ ファイルと同様の処理を実行して、mlString ファフなしで正しくフォーマットされた JavaScript 文字列を生成できます。

于 2014-04-21T02:07:43.387 に答える
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>

于 2016-07-27T15:50:18.037 に答える
0

次のスクリプトを追加します。

<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 
*/});
于 2016-06-13T17:15:52.157 に答える