写真をプレビュー表示する

概要

File API

input[type="file"]のfilesプロパティでFileListオブジェクトを参照することができる。

FileListオブジェクト

FileListオブジェクト

FileList { 0: File, length: 1, item: function }

// FileListを展開
{
  0: File
  length: 1
}

// Fileを展開
{
  0: {
    lastModifiedDate: Sat Jun 22 2013 23:45 GMT+0900 (JST),
    name: "image.jpeg",
    size: 33792,
    type: "image/jpeg"
  },
  length: 1
}

FileReader API

Fileオブジェクトのファイルを実際に読み込む為のAPI

使用手順

1. FileReaderコンストラクタをインスタンス化
2. readAsDataURLメソッドでファイルをDataURLとして読み込む
3. onload(読み込み完了)のタイミングでresultメソッドで取得

例

$ ->
    # 1.ファイルを選択したタイミングで実行する関数を設定
    $('.fileInput').change ->
        # 2. 選択されたファイルがない場合は何もせずにreturn
        if !@files.length
            return

        file = @files[0] # 3.files配列にファイルが入っています
        $_img = $(this).siblings('img') # 4. jQueryのsiblingsメソッドで兄弟のimgを取得
        reader = new FileReader() # 5. ファイルを読み込むFileReaderオブジェクト

        if file.type isnt 'image/jpeg'
            alert('選択できるファイルは10KB以下のJPEG画像だけです。')
            @value = ''
            return

        else
            # 6. 画像読み込み
            reader.readAsDataURL(file)
            # 7. 読み込みが完了した際のイベントハンドラ。imgのsrcにデータをセット
            reader.onload = (e)->
                # 読み込んだデータをimgに設定
                $_img.attr('src', e.target.result)
                return

        return

参考