コードの内容が正しく理解出来ているかを検証していただけないでしょうか。
前回は質問の仕方が悪かったので少し編集しました。
「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として読み込む。
あなたの回答
tips
プレビュー