menu
書いてる野郎
orebike@gmail.com
アップロードしたい画像ファイルをプレビューしたい場合がある。 昔はサーバも含めたダイナミックな実装が必要だったが、今では非常に簡単にできるようになっている。
FileReader というクラスを使う。
このように input する部分と、プレビュー部分を作ってやり
<input id="hoge" type="file" /> <img id="piyo" src="" alt="ここに出る" />
このようにイベントにフックしておくとよい
document.addEventListener("DOMContentLoaded", function(e){ var hoge = document.querySelector("#hoge"); var piyo = document.querySelector("#piyo"); var fr = new FileReader(); // ファイル読み込む君 // ファイル選択ダイアログで選択した後の処理 hoge.addEventListener("change", function(){ var f = hoge.files[0]; // 選択したファイル情報を取得 console.log(f.name); fr.readAsDataURL(f); // ファイルを実際に読み込む(非同期) }); // ファイルを読み(非同期)が完了した後の処理 fr.addEventListener("load", function(){ piyo.src = fr.result; // 入れてやる }); });