質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

3809閲覧

input type="file" で複数ファイルを取得する場合に配列に格納される順番

pegy

総合スコア243

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/12/05 06:09

下記の様にディテクトリに含まれるファイルを複数、再帰的に取得しているのですが、配列に格納される順番の法則が結果からよくわかりません、ドキュメンテーションを探しているのか、見つからず、名前順や編集日順などプロパティを見ても法則がわかりません。

どなたかご存知の方がいらっしゃればご教示いただけますでしょうか?

html

1input type="file" webkitdirectory directory onChange="fileListDirectory(this.files)" style="display:none"> 2 3<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 4<script> 5 function fileListDirectory(files) { 6 $('.list').empty();$('.thumb').empty(); 7 var len = files.length; 8 var name = new Array(); 9 var pass = new Array(); 10 for (i=0; i<len; i++) { 11 name[i] = files[i].name; 12 pass[i] = files[i].webkitRelativePath;//here 13 } 14 15 16 for (i=0; i<len; i++) { 17 var elm = ""; 18 if(pass[i].indexOf('.pdf')!==-1){ 19 var click = "click" 20 }else{ 21 var click = "click_otr" 22 } 23 var count = 0; // 文字数を格納 24 var strSearch = '/'; // 探す文字 25 for (var j = 0; j < pass[i].length; j++){ 26 if (pass[i][j] == strSearch){ 27 count ++; 28 } 29 } 30 31 switch (count) { 32 case 1:elm +='<div id="l_'+i+'" class="t1 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 33 case 2:elm +='<div id="l_'+i+'" class="t2 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 34 case 3:elm +='<div id="l_'+i+'" class="t3 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 35 case 4:elm +='<div id="l_'+i+'" class="t4 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 36 case 5:elm +='<div id="l_'+i+'" class="t5 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 37 case 6:elm +='<div id="l_'+i+'" class="t6 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 38 case 7:elm +='<div id="l_'+i+'" class="t7 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 39 case 8:elm +='<div id="l_'+i+'" class="t8 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 40 case 9:elm +='<div id="l_'+i+'" class="t9 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 41 case 10:elm +='<div id="l_'+i+'" class="t10 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break; 42 default:elm +='<div id="l_'+i+'" class="t_et '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>'; 43 } 44 $('.list').append($(elm)); 45 46 47 } 48 $('.list').addClass('add_line'); 49 $('.thumb').addClass('add_line'); 50 } 51 $(document).on('click','.click',function(){ 52 $(this).toggleClass('clicked') 53 54 var get_pass = $(this).data("pass"); 55 $('.thumb').empty(); 56 $('.thumb').append('<object data='+get_pass+'></object>'); 57 }) 58 59 $(document).on('click','.click_otr',function(){ 60 $(this).toggleClass('clicked_otr') 61 62 var get_pass = $(this).data("pass"); 63 $('.thumb').empty(); 64 $('.thumb').append('<object data='+get_pass+'></object>'); 65 }) 66</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/12/05 07:16

法則が見つからないのであれば、「法則はないものとして処理する」のがいちばん確実かと思いますが、それでは不満なのでしょうか?
pegy

2021/12/05 07:26

コメントありがとうございます。 不満というよりは、最終的にあるべき配列に並べ替えたいため、法則を知らなければならないという状況です。 もし本当にランダムその前提でこの機能自体利用を諦める判断をします。 ただ、HTMLやJSが標準でランダムで結果を返すようなことは考えづらいため、解を探しております
maisumakun

2021/12/05 07:42

> 最終的にあるべき配列に並べ替えたいため、法則を知らなければならないという状況です。 最終形態の順序がファイル名や内容などだけに依存するものであれば、もともとどんな順序で与えられたかは無関係かと思うのですが。
maisumakun

2021/12/05 07:42

> ただ、HTMLやJSが標準でランダムで結果を返すようなことは考えづらいため 「ブラウザやOSが違えば結果が違う」という可能性は大いに考えられます。
pegy

2021/12/05 15:17 編集

maisumakun様 ご返信ありがとうございます。言葉足らずで申し訳ございません。 OSやブラウザにも依存する可能性があるのですね。ここからは重ねて質問というよりも、現状これを踏まえて実行している環境と判明している事実を記載させていただきます。 Windows10 20HS / Chrome 96.0.4664.45 / Edge バージョン 96.0.1054.43 ※ChromeでもEdgeでも同じ結果が得られました。 1A |-1a.pdf |-2b.pdf 2B |-1c.pdf |-2d.pdf |-1C |-1e.pdf |-2f.pdf これらの、ディレクトリのとファイルを配列として受け取った結果、以下の順番であることが判明しております。 [ "2B\1c.pdf", "2B\2d.pdf", "2B\1C\1e.pdf", "2B\1C\2f.pdf", "1A\1a.pdf", "1A\2b.pdf", ] 実際に得たい結果の順番は、以下の通りです。名称昇順+再帰的に取得するイメージです [ "1A\1a.pdf", "1A\2b.pdf", "2B\1c.pdf", "2B\2d.pdf", "2B\1C\1e.pdf", "2B\1C\2f.pdf", ] 更新時間がそれぞれにもかかわらず、一定の秩序が保たれており 一番上のディレクトリの名称に着目して、1Aと1Bの順番が反転するのでarray.reverse()すればよいと考えました。(ここが最終的に法則がわかれば並べ替えたいと申し上げていた部分です)
pegy

2021/12/05 13:14

実際に結果は見ての通りで、一つ深いディレクトリに落ちてからは、名称昇順が保たれています。なぜこのような仕様なのかをあたりが付けることができず、切り分けることができれば、階層ごとにarray.reverse()を実行するしないで、求める配列の形に成形できるかとイメージしておりました。 ただ、冒頭に戻りますが、これがOSやブラウザに依存する話であれば、必ず期待通りに実行されるわけではないため、発想が適切ではないという「一つの解」が得られました。 発想自体が稚拙であり、無能であるとすれば、確かに聡明なpepus様の仰る通り私にはプログラミングは向いていないのかもしれません。そんな聡明な方がわざわざお立ち寄りいただいて時間を割いてコメントまでくださるなんて、痛み入るばかりです。 宜しくお願い申し上げます。
wakuwaku499

2021/12/06 01:13

ソートしたい条件ですが、「ディレクトリ名」・「ファイル名」でソートするということで要望を満たせていますでしょうか?もしそうでしたら、「ディレクトリ名」・「ファイル名」を2次元で配列に持ってソートすれば、元の法則がわからなくてもいいのではないかと思いました。
pegy

2021/12/06 01:44

コメントありがとうございます。 はい、その2つの情報を取得できるのであれば、満たせていると思います。 「ファイル名」はname[i]で取得できます。 一方、当該files[i].webkitRelativePathでは正規表現を利用して"/"で切り「ディレクトリ名」を取得ことはできると考えたのですが、自分のファイルが相対参照の起点になりユーザーの利便性が損なわれるため、webkitRelativePathを利用すること自体を回避することとしました。 前回質問でint32_tにご教示いただいた url[i] = URL.createObjectURL(files[i]);で取得したurl[i]もバイナリ形式であり、ディレクトリ情報を取得できるわけではないことがわかりました。色々調べた結果、セキュリティ上の理由で正しくディレクトリの情報を取得することが困難であり、結果的にその方式を採ることはできないものと推察しておりました。
guest

回答1

0

関連する仕様は以下のものですが、順番については記述されていませんので、ブラウザの実装依存ということでしょう。順番については何の前提も置かずに、自分の望む結果になるように並び替えしましょう。

投稿2021/12/05 23:53

int32_t

総合スコア20672

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pegy

2021/12/06 00:47

コメントを頂き、誠にありがとうございます。 ご提示頂いたドキュメントを自分でもじっくり読み、該当記述がないことや、知らなかった仕様等がないかを確認するために、少しお時間をください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問