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

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

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

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

Q&A

0回答

641閲覧

JavaScript FileReaderとlocalStorageについて

taka_oct092018

総合スコア133

JavaScript

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

0グッド

1クリップ

投稿2021/01/06 13:04

コードの内容が正しく理解出来ているかを検証していただけないでしょうか。
前回は質問の仕方が悪かったので少し編集しました。
「HTML5プロフェッショナル認定試験レベル2スピードマスター問題集 P212 問5-22」より。

1.ユーザーが選択した画像ファイルをimg要素に設定して表示する。
2.ブラウザを閉じた後に再度同一ページにアクセスした際は、選択した画像でデータを取り出してimg要素に表示させる。

<input type="file" id="uploader"> <img src="no-image.png" alt="icon" id="icon"> window.addEventListener("load", function () { var icon = localStorage.getItem("icon"); if (icon) { document.querySelector("#icon").src = icon; } });
document.querySelector("#uploader"). addEventListener("change", function (){ var file = document.querySelector("#uploader").files[0]; var reader = new FileReader(); reader.onload = function () { document.querySelector("#icon").src = reader.result; localStorage.setItem("icon", reader.result); }; reader.readAsDataURL(file); });

「自分なりの解釈(番号は順不同です。)」
(1) var icon = localStorage.getItem("icon");
localStorageからキーiconに対応したデータを取り出している。

(2) document.querySelector("#icon").src = icon;
選択した画像データを取り出してimg要素に表示させる。

(3) var file = document.querySelector("#uploader").files[0];
input要素からファイルを取り出している。

(4) var reader = new FileReader();
changeイベントが発生したとき、input要素のfilesプロパティにあるFileオブジェクトを取得している。

(5) document.querySelector("#icon").src = reader.result;
ユーザーが選択した画像ファイルを表示している。

(6) localStorage.setItem("icon", reader.result);
localStorageにreader.resultを保存している。

(7) reader.readAsDataURL(file);
ブラウザを閉じた後も利用するため、画像ファイルをreadAsDataURLとして読み込む。

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

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

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

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

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

m.ts10806

2021/01/06 20:21

>コードの内容が正しく理解出来ているかを検証していただけないでしょうか。 前の質問でされた指摘を正しく理解できてるならこんな質問できないはず。
Lhankor_Mhy

2021/01/08 10:23

6と7が怪しいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問