2016/04/27

[JavaScript]fileから取得した画像を表示する

昨日、inputでfile属性を使って選らんだファイルのサイズをJavaScriptで取得する方法を書きましたが、そのファイルが仮に画像だった場合、表示することはできるのだろうか?
昨日と同様になんだか初歩的な気がしなくもないけど、今更ながら調べたらありました。

<input type="file" class="_file">
<script>
jQuery(function(){
  $('._file').on('change',function(e){
    var file = e.currentTarget.files[0];
    var dataUrl = URL.createObjectURL(file);
    var image = new Image();
    image.onload = function(){

    };
    image.src = dataUrl;
  });
});
</script>
すっげー簡単にできた。

しかし、URL.createObjectURLメソッドを初めて知った。

参考
File APIを使ってJavaScriptで画像を読み込む。canvasを使って画像を出力

0 コメント:

コメントを投稿