选择文件时预览图片

佚名 6年前 (2019-05-09) 随笔 1542人围观抢沙发百度已收录

<input id="image" type="file" name="image" onchange="showPhoto(this)">
<img id="show" th:src="${session.user.image}" width="100px" height="100px">
<!--一个file类型,一个img类型-->

function showPhoto(tag){
    var file = tag.files[0];

    var fr = new FileReader();
    //把图片内容读取到DataURL中
    fr.readAsDataURL(file);

    fr.onload = function(){
        //获取读取的内容
        var url = fr.result ;
        document.getElementById("show").src = url ;
    }
}

//完事!

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。