投稿者 tel | 2010年11月14日

FileAPIでローカル画像を読み込む

いつの間にかGoogle ChromeでもFileAPIが使えるようになっていたので、ローカルの画像をブラウザにドロップして表示するコードを書いてみた。
jQuery 1.4.2使ってます。Firefox3.6とGoogle Chrome8で動作確認。

$(document).ready(function() {

  $('#preview').bind('drop', function(e) {
    e.preventDefault();
    loadFile(e.originalEvent.dataTransfer);
  });
  $('#preview').bind('dragover', function(e) {
    e.preventDefault();
  });
});

function loadFile(obj) {
  var file = obj.files[0];

  if(!file.type.match(/image\/[a-z]/i))
    return;

  var img;

  if($('#preview > img').size() == 0) {
    img = $('<img>');
    $('#preview').append(img);
  } else {
    img = $('#preview > img');
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    img.attr('src', e.target.result);
  }
  reader.readAsDataURL(file);
}

HTMLに適当なタグにid=”preview”をつけておいてイメージタグを生成してくっつけてる。

サンプル

四角の中に適当な画像ファイルをドロップすると読み込んで画像を表示する。

Webサーバにおいてテストするときはいいんだけど、Google Chromeだとローカルでテストする場合は–allow-file-access-from-filesをつけて起動しないとFileReaderで読み込みができないから注意。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。