HTML5Tweetこんにちは、橋本です。今回は小ネタを1つ紹介したいと思います。APIを使えば、投稿された画像(正確には、選択されたローカルファイル)の情報を取得することができます。APIの使い方を見て行きましょう。API自体はjQueryと何の関係もありませんが、いろいろと面倒なので今回もjQueryを使っています。読み込みが完了した際のイベントハンドラ。</body></html>サンプルのコメントに番号をふっておいたので、番号に沿って説明していきたいと思います。1ですが、ファイルの情報は、input要素のfiles配列にFileオブジェクトとして格納されています。input要素のfiles配列のlengthでファイルの選択の有無を確認し、選択されていない場合には処理を終えるよう設定しています。2は上記で説明したとおり、files配列にファイルが格納されていますので、そこから0番目の要素としてファイルを取得しています。3は取得したファイルのデータを設定するimgタグを予め変数に格納しています。jQueryオブジェクトだということを明示するために、"$_"プレフィクスをつけています。4はファイルを読み込むためのFileReaderオブジェクトをインスタンス化し、変数に入れています。これが今回のキモです。FileReaderオブジェクトはファイルを読み込むためのオブジェクトです。各種メソッドにFileオブジェクトを渡すことで、非同期でデータの読み込みを行います。以下の4つのメソッドがあるのですが、よく使うのは最初の2つです。画像に関しては最初の1つでいいと思います。テキストとして読み出す。エンコーディングを指定可。バイナリデータとして読みだす。ArrayBufferを返す。詳細不明5はFileReaderオブジェクトのonloadイベントのイベントハンドラを設定しています。上記でちょっと触れたんですが、FileReaderオブジェクトのファイルの読み出しは非同期となりますので、イベントハンドラを設定する必要があります。6でデータの読み込みを開始しています。今回は取得したデータをそのままimgタグのsrcにつっこむので、readAsDataURLメソッドを使用しています。