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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ファイルI/O

ファイルI/Oは、コンピューターにおけるファイルの入出力です。これは生成/削除やファイルを読み込んだり、出力をファイルに書き込むようなディレクトリやファイルの運用を含みます。

JavaScript

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

HTML

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

Q&A

解決済

1回答

797閲覧

JavaScriptによるファイル内容の読み込みと利用について

liang_x2

総合スコア1

ファイルI/O

ファイルI/Oは、コンピューターにおけるファイルの入出力です。これは生成/削除やファイルを読み込んだり、出力をファイルに書き込むようなディレクトリやファイルの運用を含みます。

JavaScript

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

HTML

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

0グッド

0クリップ

投稿2020/07/26 14:18

前提・実現したいこと

JavaScriptのFileReaderを利用してテキスト等のファイルを読み込み、関数内でその値を使おうとしています。しかし、以下のコードではテキストファイルから取得した内容を関数で使うことができません。JavaScriptコード内のresultから値を取り出すか、別の方法でテキストファイルの内容を関数内で使用したいです。

該当のソースコード

html

1<!--test.html--> 2<form id="testForm"> 3 <input multiple="" id="inputFile" type="file"/> 4</form> 5<button id="button1">click</button> 6<script src="test.js"></script>

javaScript

1//test.js// 2function main() { 3 let inputFiles = document.getElementById('inputFile'); 4 let result = []; 5 for (let i = 0; i < inputFiles.files.length; i++) { 6 let reader = new FileReader(); 7 reader.onload = function () { 8 result.push(reader.result) 9 }; 10 reader.readAsText(inputFiles.files[i]); 11 12 } 13 console.log('result',result); 14 console.log('result[0]',result[0]); 15 //ここでテキストの内容をString型として使いたい 16} 17 18let button1 = document.getElementById('button1'); 19button1.addEventListener('click', main);

試したこと

ChromeでHTMLを開いて適当なテキストファイルを読み込み、コンソールを確認するとresultにファイルの内容は読み込まれているのですが、result[0]はundefinedとなりました。

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

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

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

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

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

guest

回答1

0

ベストアンサー

for (let i = 0; i < inputFiles.files.length; i++) { let reader = new FileReader(); reader.onload = function () { result.push(reader.result) }; reader.readAsText(inputFiles.files[i]); } console.log('result',result); console.log('result[0]',result[0]);

上記箇所でjavascriptの仕様上、FileReaderのonloadにセットしたメソッドより先にconsole.logが動作していることが原因のようです。

for (let i = 0; i < inputFiles.files.length; i++) { let reader = new FileReader(); reader.onload = function () { result.push(reader.result) console.log('result',result); console.log('result[0]',result[0]); }; reader.readAsText(inputFiles.files[i]); }

こちらで動作するのではないでしょうか?

追記
全ファイル読み込みを待ち合わせるのにはちょっと複雑になってしまうのですがPromiseを使用することで実現可能です
例えば下記のとおりです。

//test.js// function main() { let inputFiles = document.getElementById('inputFile'); console.log(inputFiles.value) console.log(inputFiles.files) let result = []; var promise = [] for (let i = 0; i < inputFiles.files.length; i++) { promise.push(new Promise((resolve, reject) => { let reader = new FileReader(); reader.onload = function () { result.push(reader.result) resolve() }; reader.readAsText(inputFiles.files[i]); })) } Promise.all(promise).then(() => { console.log('result[0]',result[0]); }) //ここでテキストの内容をString型として使いたい } let button1 = document.getElementById('button1'); button1.addEventListener('click', main);

投稿2020/07/26 14:55

編集2020/07/26 15:59
tetosept

総合スコア36

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

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

liang_x2

2020/07/26 15:26 編集

回答ありがとうございます。FileReaderとonloadの関係について理解することができました。 実現したいことに関する質問なのですが、ファイルの読み込みを待った後にforループ後のコメントの位置でファイル内容のString型が入った配列を利用することは可能でしょうか。 onloadの関数内で他の関数を実行する以外の方法があれば教えていただけるとありがたいです。
tetosept

2020/07/26 16:00

ちょっと主旨と違うのかもしれませんが、全ファイル読み込み完了後に処理を続けたい場合はPromiseで待ち合わせることも可能です。追記しましたので確認いただければと思います。 また不明なことがあれば聞いてください
liang_x2

2020/07/26 17:14

目的としていた動作を行うことができました。 非同期処理の完了の受け取りについて大変勉強になりました。 回答、追記していただき本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問