投稿2020/02/14 15:42
プログラム初心者です。
絵の資料として貯めた画像ファイルを閲覧するためのシステムを、HTML/CSS/JSで作ろうと思っています。
そこで、メインのHTMLファイル(index.html)があるディレクトリのローカルファイル名の一覧を取得したいです。
次のようなディレクトリ構成を想定しています。
(root) ├ index.html └ picture ├ hogehoge.jpg ├ mogemoge.png ・ ・ ・ └ foofoo.gif
お力添えよろしくお願いします。
：何とか動くようにはできましたが、以下の理由であまり使いたくないです。
(1)IEでしか(?)動かない
(2)毎回許可が必要
：以下のコードを実行するとUncaught ReferenceError: Folder is not defined というエラーが出て動かせませんでした。
f = new Folder ("/data/"); //エラーメッセージ： Uncaught ReferenceError: Folder is not defined
：調べたところローカルだけでもPHPが動かせるとありましたが、自力では動かせませんでした。
：自力だとこれが最も現実的だと思いましたが、大変なのでしたくないです。
また、ローカルで完結するので特に制限はないです。
ですが言語の仕様で無理そうな場合は、他の方法も教えていただきたいです。
回答4件
0
ベストアンサー
自分用のアプリケーションでローカルでのみ実行するという前提で回答します。
JavaScriptのFile APIを利用すると、Chromeで以下のようなコードを書くとディレクトリ内の画像ファイルを取得して表示できます。
ただ、ディレクトリを選択する際にダイアログがでるので、そこで許可を出す必要があります。
個人用のアプリケーションでセキュリティリスクがないのであれば、アップロードしても問題ないと思います。
（WEBで公開する場合はセキュリティリスクがあるので、その点を考慮した実装にする必要があります）
html
1<input type="file" id="file" name="upfile[]" webkitdirectory /> 2<div id="list"></div>
js
1document.getElementById("file").addEventListener("change", ev => { 2 for (let i = 0; i < ev.target.files.length; i++) { 3 let file = ev.target.files[i]; 4 5 // ディレクトリの相対パス 6 let relativePath = file.webkitRelativePath; 7 8 let fileReader = new FileReader(); 9 fileReader.onload = (function(theFile) { 10 return function(e) { 11 // Render thumbnail. 12 var figure = document.createElement("figure"); 13 figure.innerHTML = ` 14 <img class="thumb" src="${e.target.result}" /> 15 <figcaption>${theFile.name}</figcaption> 16 `; 17 document.getElementById("list").insertBefore(figure, null); 18 }; 19 })(file); 20 21 fileReader.readAsDataURL(file); 22 } 23});
こちらにサンプルコードを上げましたので、よろしければ参考にしてください。
サンプルコード:CodePen
参考リンク
投稿2020/02/15 00:26
編集2020/02/15 00:31
総合スコア665
0
Chrome の sandbox 内限定、という条件付きであれば、FileSystem API を使えばかろうじてできるかもしれません。
日本語のドキュメントがほとんどないので、いばらの道だと思いますが……
FileSystem API ｜ 特集カテゴリー ｜ Developers.IO
LocalFileSystem - Web API | MDN
DirectoryEntrySync - Web API | MDN
投稿2020/02/15 01:06
総合スコア37409
0
インのHTMLファイル(index.html)があるディレクトリのローカルファイル名の一覧を取得したいです。
ブラウザ上のHTMLだけでは、セキュリティ上不可能です。
「ブラウザ拡張を使う」「事前にファイル一覧を特定のファイル名で作成しておく」「Electronや他の言語で作るなど、ブラウザ内の枠に縛られない別の手段を使う」などの手法が必要になります。
投稿2020/02/14 23:30
編集2020/02/14 23:31
総合スコア146536
0
回答としては maisumakun さんと同じです。
ブラウザ内の枠に縛られない別の手段 として dir コマンドの結果を文字列処理する方法を考えました。
Q&A
dir > entries.txt の結果をファイルに出力後、Shift_JIS を utf-8 にするため、Fetch API で Shift_JIS の HTML をDOM として読み込む の手法を採用しています。
javascript
1const url = "./pictures/entries.txt"; 2 3// Shift_JIS to UTF8 on browser 4const parseBlob = blob => { 5 return new Promise(resolve => { 6 let reader = new FileReader(); 7 reader.onload = () => { resolve(reader.result) }; 8 reader.readAsText(blob, 'Shift_JIS'); 9 }); 10}; 11 12fetch( url ) 13 .then( res => res.blob() ) 14 .then( parseBlob ) 15 .then( txt => { 16 let ary = txt.split(/\r?\n/).reduce( (acc,line) => { 17 let m; 18 if( m = line.match(/^\d{4}/\d{2}/\d{2}\s+\d{2}\:\d{2}\s+[\d,]+\s(.+)$/) ){ 19 acc.push(m[1]); 20 }; 21 return acc; 22 }, []); 23 24 console.log( ary ); // ファイル名取得（ entries.txt 含む ） 25 26 }); 27
ご質問に記載のなかった条件として webサーバーが稼働しており、Ajaxが使えることを想定。
IEに言及されていましたが、切り捨てて、モダンブラウザ専用にしています。
投稿2020/02/15 04:55
総合スコア5434
あなたの回答
tips
プレビュー
