JS.18 ディレクトリ内の画像を全て表示する。

ディレクトリ内部の画像を全て表示します。

今後 focus などを用いてラベル付けが楽にできるようにしたいと思います。

画像サイズ（現在12%）：5% 100%

コード

html

<div style='text-align: center;'>
  <label for='InputFiles'>
    ディレクトリを選択してください。
    <input id="InputFiles" type="file" webkitdirectory style='display:none;'>
  </label>
</div>
<ul id="gallery" class="galleryCover">
</ul>

js

var DirInputTag = document.getElementById('InputFiles');
var GalleryTag = document.getElementById('gallery');
var files;
var file;

DirInputTag.addEventListener('change', function(e){
  files = e.target.files;

  var img
  var div;
  for (var i=0; i<files.length; i++) {
    let reader = new FileReader();
    reader.onload = function(e) {
      img = document.createElement('img');
      img.setAttribute('src', e.target.result);
      li = document.createElement('li');
      li.appendChild(img);
      li.className = 'galleryElements';
      GalleryTag.appendChild(li)
    }
    reader.readAsDataURL(files[i]);
  }
});
other contents
social