JavaScript ユーザに画像を選択させる

ユーザにローカルの画像を選択させてWebページ上に反映させたかったので調べた。

画像を選択させるための導線

<input type="file" id="myImage" accept="image/*">
<img id="preview">

• input タグを使う。
• type はfile を指定する。
• acceptというattributeがあるから、それにimageを設定する。

ユーザが選択した画像を画面に反映する

$('#myImage').on('change', function (e) {
  var reader = new FileReader();
  reader.onload = function (e) {
    $("#preview").attr('src', e.target.result);  
  }
  reader.readAsDataURL(e.target.files[0]); 
});

• inputに対して、ユーザが何かしら選択したことを検知するリスナーを付与
• FileReaderで読み込んで、読み込んだ画像をsourceとしてimageタグに付与
• jqueryで書かれてるぽい

参考

• 【JavaScript】input[type=”file”]で選択した画像をimg要素で表示する