JavaScript实现简单的前端上传图片预览

<div class="file_upload">
        <div id="portrait"></div>
        <input type="file" name="" id="" onchange="showPerview(this)">
    </div>

    <script type="text/javascript">
        
        function showPerview(source) {
            var file = source.files[0];
            if (window.FileReader) {
                var fr = new FileReader();
                fr.onloadend = function(e) {
                    document.getElementById(‘portrait‘).style.backgroundImage =‘url(‘+e.target.result+‘)‘;
                    document.getElementById(‘portrait‘).style.backgroundSize = ‘cover‘;
                    document.getElementById(‘portrait‘).style.backgroundRepeat = ‘no-repeat‘;
                };
                fr.readAsDataURL(file);
            }
        }

    </script>