JavaScriptでファイル名順に複数ファイルを読み込む方法IT系おじさんのチラシの裏2018年10月~プロフィールAUTHOR:とっちら書きたくなったときに書きたいことを書く雑記ブログ。IT系のネタが多いかも知れません。11:57とっちら1年前の記事に助けられました。14:28とっちらこの記事のお陰で60分録画できるようになりました。16:01とっちらライセンスを明示して貰えると使いやすいのですが。14:37ご回答いただきどうもありがとうございます。21:56とっちら超初心者です。統計情報お問い合わせ当サイトの記事にはアフィリエイト広告のリンクが含まれる場合がありますJavaScriptでファイル名順に複数ファイルを読み込む方法JavaScript02024/06/13INPUTタグで複数ファイルを読み込む際、ブラウザ内で処理するときはFileReaderオブジェクトを使うことが多いと思います。これは非同期処理なので、はてファイル名順に処理する場合はどうしたものか、とちょっと悩んだので備忘録としてメモしておきます。具体的には連番の画像ファイルを順番に並べたい、とかですね。選択された複数の画像ファイルをメモリ中にロードする例ですが、このコードではどの順番に画像が読み込まれるか不確定です。実際試してみると01.png,02.png,03.png...という連番ファイルであっても、02.png,01.png,03.pngというような順番に読み込まれることがあります。{imgArray.push(imgTemp[key]);}}}};reader.readAsDataURL(this.files[i]);}};</script>解説...若干、メモリの無駄遣いというか、強引な気がしなくもないですが、一時的にファイル名をキーとした連想配列(imgTemp)を作り、選択されたファイル数まで揃ったら、キーをソートして、保存用の配列(imgArray)にキー順にほおりこむ、という処理をしています。まとめもっとスマートなやり方がありそうなのでググってみたのですが、むしろFileReaderのonload中にファイル名を取得するにはどうすれば良いんだ?という掲示板の書き込みとか、それをなんかやたら小難しい方法で解決している書き込みしか見当たりませんでした。FileReaderオブジェクトにファイル名を保存しておければわかりやすいんですけどね。見た目的にreader.onloadの中からfilenameを参照したら、後で書き換わるように感じるのかも知れません。昔のJavaScriptのvar変数はグローバルスコープだったから、というのも理由のひとつかも。いずれにせよ、ループ内でlet宣言で作成された変数filenameは、onloadでセットしている無名関数に値渡しされるので、どんな順番で呼ばれようとfilenameが書き換わることはありません。...などと言いつつ、自分自身が3歩歩いたら忘れそうなのでここにメモしておきました。関連記事JavaScriptのcanvasで縦書きを行う際の備忘録canvas上に縦書きの文章を出力して画像化しようと考えてちょっとハマったので忘れないうちにメモしておきます。結論から先に書くと、基本的にcanvasにはwriting-modeの設定が効くの02024-06-11JavaScriptのWebAudioAPIで楽曲の口パクをしてみる以前、ソフトウェアの解説動画を作った際、おっさんの声だけ流れてるのもアレだし、最近流行りのアバターにしゃべらせるやつやってみよう、と思ったことがあります。vtuberとかおじさんよくわからない02023-11-20JavaScriptでレトロなシューティングゲームを作ってみたつい先日、ぼくの敬愛するパソコンの師匠から、携帯ゲーム機型のAndroid端末を買ったというメールがありました。コメント投稿直後ならコメントの編集/削除が可能です。※24時間経過するか、新しく投稿した場合は古い投稿の編集や削除は出来ません。※ブラウザでCookieが受け入れられない場合はこの機能は使えません。非公開にチェックを入れたコメントは管理人のみ閲覧できます。コメント投稿のガイドライン誰もが閲覧できるコメント欄ですので個人が特定できる情報等は書き込まないようにしましょう。他人のHPやブログの文章を掲載する場合は著作権法第32条「引用」の条件を満たすかご確認ください。誹謗中傷にあたる表現などは場合によっては法的な責任を問われる可能性があるためご注意ください。とっちらか~るTOP。