前端实现图片上传预览的方法

如有如下HTML代码片段

<input type="file" onchange="display(this)" accept="image/*"/>
<img id="displayImg"/>

我们需要实现当用户在input框内选择好图片后能在img标签中显示，实现预览的效果，则可以添加如下JS代码：

<script type="text/javascript">            
//添加input框的onChange事件
function display(obj) {
    var file = obj.files[0];

    console.log(obj);console.log(file);
    console.log("file.size = " + file.size);  //file.size 单位为byte

    var reader = new FileReader();

    //注册相关的回调
    //成功后的回调，最重要的一个
    reader.onload = function (e) {
        //展示
        var img = document.getElementById("displayImg");
        img.src = e.target.result;
    }

    //读取
    reader.readAsDataURL(file)
}
</script>