JavaScript編 ドラッグアンドドロップされたファイルを表示するの続編です。今回はフォルダも対象にします。前回はファイルはひとつに限定していましたが、今回は複数のファイルも対象とします。

HTML部分

style.css

JavaScript部分

描画に必要な情報を取得する

ScanFiles関数はフォルダのなかにあるファイルを調べます。もしフォルダのなかにフォルダがある場合はもう一度自分自身を呼び出します。

GetFiles関数はScanFiles関数の結果を引数にしてFileオブジェクトの配列を返します。

Fileオブジェクトから取得できたデータを格納するオブジェクトを定義します。

GetImageDataFromFiles関数はFileオブジェクトの配列からHTMLを生成したりcanvas要素に描画処理をするために必要な情報(datum)の配列を返します。またdiv要素やcanvas要素のサイズを計算します。

取得した情報をつかって描画する

ShowImagesToDiv関数は、第一引数で指定したdiv要素のサイズを指定したsize(変更するのは幅だけ、高さは’auto’とする)に変更してdataを追加します。

ShowImagesToCanvas関数は、第一引数で指定したcanvas要素のサイズを指定したsizeに変更してdataを描画します。