ボム君.com

Masa's blog

今まで学んできたITスキルを主に。

JQury:自身のサーバー上、もしくはローカルのフォルダー内にある全てのイメージをHTMLにロードする（読み込む）

クライアント プログラミング 並行処理 HTML JavaScript JQuery

ロードする前に。。。

JQueryを使って下記のコードを使えば一瞬でロードできる。
ただその前にJQueryをインポートする。方法は二つ。

１） グーグルがサーバー上で提供しているJQueryを使う

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

上記のコードをhead内に埋め込めばOK.


２） 自身のサーバー上、もしくは、ローカルフォルダーにJQueryを保存する。
jquery.com

ダウンロードを終えた後、

<script src="あなたのサーバーURL/jquery.min.js"></script>

同じく、上記のコードをhead内に埋め込めばOK.

画像をサーバーから読み込む

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 +"'>" );
            } 
        });
    }
});

何をしているのかというと、まずJQueryのAJAXメソッドを使ってサーバーにファルダーを送ってもらうようにリクエストする。
その後、サーバーは全ての画像ファイルのリンク先を返してくる。あとはそれら一つ一つのリンク先を解読し、htmlに画像をアペンド（追加）するだけ。

＊＊注意＊＊
サーバーがない場合でこのAJAXメソッドを行うと、

XMLHttpRequest cannot load javascript:;. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

という意味不のエラーが発生するので下記の方法をオススメする。

画像をローカルフォルダーから読み込む

セキュリティーの問題により、ある一つのフォルダー内の全ての画像を入手、または取り出し、ページにロードするなどはできません。よって二つ方法があります。

１）ファイル名を１から順に設定し、あとはJavaScript内でLoopしてページにロードする。
画像ファイル名が"back1","back2","back3"が保存されているとする。

<body>
      <script type="text/javascript">
          var imageFolder = 'asset/img/back' ;
          for(var i=1;i<=3;i++){
            var html = "<img src = '"+imageFolder+i+".jpg' width=100 height = 100 >";
            $('body').append(html);
          }
      </script>
</body>

２）Form　Inputでユーザーにファイル（複数可）選択してもらい、HTML5のFilereader機能で、全て読み込む。

<input type="file" id="fileinput" multiple />
<script type="text/javascript">
  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 

    if (files) {
        for (var i=0, f; f=files[i]; i++) {
              var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                    var contents = e.target.result;
                    alert( "Got the file.n" 
                          +"name: " + f.name + "n"
                          +"type: " + f.type + "n"
                          +"size: " + f.size + " bytesn"
                          + "starts with: " + contents.substr(1, contents.indexOf("n"))
                    ); 
                };
            })(f);

            r.readAsText(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
  }

  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
</script>