Cacher is the code snippet organizer for pro developers

var upload = document.querySelector('#btn-upload');
upload.addEventListener('change', previewFile, false);

function previewFile() {

    var preview = document.querySelector('#preview')
    var file    = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();

    // fileを読み込んだらonloadendが走る
    reader.readAsDataURL(file);

    reader.onloadend = function (evt) {

        // file.typeの判定
        // ないものには強制的に追加
        var src;
        if (file.type.indexOf('image') >= 0) {
            src = reader.result; // base64
        } else {
            var base64 = reader.result.replace('data:', '');
            src = "data:image/jpeg;" + base64;
        }

        $(preview).css('background-image', 'url(' + src + ')');
    };

}


/*

<input type="file" id="input-image" accept="image/*">
<img id="preview" src="" alt="">

*/