More than 5 years have passed since last update.

posted at

updated at

HTML5 File API で画像をアップロードしてプレビュー

  1. <input type='file'/> で画像を選択させる
  2. input.onchange が発火するのでコールバックをとる
  3. File APIがあれば input.files[0] にFileオブジェクトが入ってるの抜き取る
  4. FileReader の FileReader#readAsDataURL に Fileオブジェクトを渡す
  5. FileRead#onload が発火するのでevent.target.result に Data uri が入ってる
  6. imgのsrcにData uri ぶち込む
<img class='image-preview'/>
<input type='file' class='file-selector'>upload</input>
$preview = $('img.image-preview')
$file = $('input.file-selector')
$file.on 'change', =>
  [file] = $file.get(0).files
  fr = new FileReader
  fr.onload = (event) =>
    $preview.attr src: event.target.result

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up