html5上传图片立即看到效果和图片替换

最新推荐文章于 2022-04-25 20:47:15 发布

开心大表哥

最新推荐文章于 2022-04-25 20:47:15 发布

阅读量2k

点赞数 3

分类专栏： js算法文章标签： html5 图片头像上传

本文链接：https://blog.csdn.net/a419419/article/details/74659147

版权

js算法专栏收录该内容

41 篇文章 2 订阅

订阅专栏

1.先写一个和

<img id="headImg" src="../img/assets/Oval 2.png"/>
<input type="file" id="fileInput" class="fileInput img-circle" />

2.通过Css,控制这两个元素的位置，使他们大小相同，位置相同，达到重合的状态。读者可以更加自己的需要调整位置。
这里写图片描述

#headImg{
    width: 160px;
    height: 160px;
    margin-top: 72px;
    margin-left: 510px;
    border-radius: 50%;
}
#fileInput{
    float: left;
    width: 160px;
    height: 160px;
    opacity: 0.0;
    background: black;
    cursor: pointer;
    margin-top: -160px;
    margin-left: 510px;
}

这里写图片描述
3.用js获取file的url，再赋值个img的src,就能达到立即显示的效果。

//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
//用户的头像立即查看
$("#fileInput").change(function() {
    var objUrl = getObjectURL(this.files[0]);
    if (objUrl) {
        $("#headImg").attr("src", objUrl);
    }
});