【JavaScript】 input[type=”file”]で選択した画像をimg要素で表示する

Tweet

Category JavaScript 2016/04/19

問題

<input type=”file”> で選択された画像をJavaScriptで取得したいです。

答え

HTML

<input type="file" id="myImage" accept="image/*">
<img id="preview">

JavaScript

$('#myImage').on('change', function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#preview").attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
});

DEMO

ファイルを選択すると、下にプレビューを表示します。