Logicky BLOG

Logickyの開発ブログです

  • Javascript
  • Python
  • PHP
  • Go
  • OS・サーバ
  • 機械学習
  • つくったもの
  • 数学
  • アルゴリズム
  • Logicky

画像をinputにドラッグして表示する

IEはダメらしいですが、typeがfileのinputはドラッグ&ドロップでファイルを登録できます。なので、ドロップしたらinputにchangeイベントがおこります。changeイベントが発生したら、FileReaderを使って表示させます。

$(document).on('change', '.img_input', function(e){
    var file = e.target.files[0];
    if(! file.type.match('image.*')) return;

    var reader = new FileReader();
    reader.onload = (function(f) {
        return function(e) {
            $('.img_list').html('<img src="' + e.target.result + '" alt="' + f.name + '"');
        };
    })(file);

    reader.readAsDataURL(file);
});
  • Javascript
  • Python
  • PHP
  • Go
  • OS・サーバ
  • 機械学習
  • つくったもの
  • 数学
  • アルゴリズム
  • Logicky