JavaScriptでローカルのフォルダー内ファイル全読み込み。

###JavaScriptでローカルのフォルダー内ファイル全読み込み。
JavaScriptでローカルのフォルダーを指定したらその中の画像ファイルを全部表示するにはどうすればいいですか？
追加：サーバー上にhtmlはあって、ローカルのフォルダーを参照。

これのフォルダーを指定して、その中の画像を全部表示ってできないですか？

html
1<style>
2  .thumb {
3    height: 75px;
4    border: 1px solid #000;
5    margin: 10px 5px 0 0;
6  }
7</style>
8
9<input type="file" id="files" name="files[]" multiple />
10<output id="list"></output>
11
12<script>
13  function handleFileSelect(evt) {
14    var files = evt.target.files; // FileList object
15
16    // Loop through the FileList and render image files as thumbnails.
17    for (var i = 0, f; f = files[i]; i++) {
18
19      // Only process image files.
20      if (!f.type.match('image.*')) {
21        continue;
22      }
23
24      var reader = new FileReader();
25
26      // Closure to capture the file information.
27      reader.onload = (function(theFile) {
28        return function(e) {
29          // Render thumbnail.
30          var span = document.createElement('span');
31          span.innerHTML = ['<img class="thumb" src="', e.target.result,
32                            '" title="', escape(theFile.name), '"/>'].join('');
33          document.getElementById('list').insertBefore(span, null);
34        };
35      })(f);
36
37      // Read in the image file as a data URL.
38      reader.readAsDataURL(f);
39    }
40  }
41
42  document.getElementById('files').addEventListener('change', handleFileSelect, false);
43</script>

y_waiwai

2019/04/25 15:35

読み込んでそれをどうするのでしょうか

退会済みユーザー

2019/04/25 15:36

表示したいです。

退会済みユーザー

2019/04/25 15:37

修正しました。

退会済みユーザー

2019/04/25 15:46

ブラウザの外のファイルシステムにアクセスはできません。それができると、悪いことできちゃいます。

退会済みユーザー

2019/04/25 16:01

アップロードとかあるじゃないですか。参照ボタンをクリックして、フォルダーを指定してもらったらそのフォルダーの中の画像を全部表示することもできそうじゃないですか。

退会済みユーザー

2019/04/25 16:02

退会済みユーザー

2019/04/25 16:36

サーバー側のフォルダ内ではないです。 HTMLはサーバー、参照するのがローカルです。

miyabi_pudding

2019/04/26 06:33

昔、私も同じことをしたかったですが・・・。できないんですよねーブラウザ側で、HTML上の仕組みのinput type="file"などしか機能しないようになっています。 ockieさんのおっしゃる通りです。 HTML側（ブラウザ）にとっては、ローカル領域も、”一つのサーバー”との認識になります。とにかく、HTMLがサーバーにあろうがなかろうが、クライアントサイド（HTML、JavaScript）側から、ファイル領域を参照することはできません。なぜなら、それができてしまうと、第三者が、JSを使って、ネットワークを介して不特定多数のマシンをコントロールできてしまいます。セキュリティ上の問題です。そういった悪さをできないよう、ブラウザ側で制限をしているんです。 IEは最近、重大なセキュリティホールがまた見つかったようですけどね・・・。

退会済みユーザー

2019/04/26 06:35

ということは、、、ドラックしたら画像を表示することはできても、フォルダーを選択してその中の画像ファイルの表示することはできないんですか。

miyabi_pudding

2019/04/26 06:38

kei344さんのご回答の通りやってみてください。もしかしたら、一覧の表示だけならできるかも・・・。

退会済みユーザー

2019/04/26 06:39

<input id="file" type="file" name="upfile[]" webkitdirectory>これでいける？

miyabi_pudding

2019/04/26 06:41

まずは、kei344さんのご回答通りにやってみてください。