修改个人中心背景图头像基本数据

最新推荐文章于 2021-01-05 15:55:12 发布

Jaye Wang

最新推荐文章于 2021-01-05 15:55:12 发布

阅读量2.0k

点赞数 1

分类专栏： JS 文章标签： j S

本文链接：https://blog.csdn.net/lmlikosakura/article/details/82802177

版权

本文提供了一个简单的个人中心实例，讲解如何通过原生JavaScript实现背景图、头像图片的更换以及个人信息的修改功能。点击事件结合图片上传函数更新图片，个人信息编辑时变为可编辑状态，账号信息不可修改。保存则更新信息，取消则恢复原状。

摘要由CSDN通过智能技术生成

写一个简单的个人中心的实例

今天主要介绍背景和头像图片的修改，还有个人信息的修改

首先写一个input

            <input id="banner_bg_file" type="file" onchange="chooseImg(this)" hidden>

然后配合点击事件与图片函数将本体图片上传达到修改的效果

banner_bg_change.addEventListener('click', function () {
    var banner_bg_file = document.getElementById('banner_bg_file')
    banner_bg_file.click()
})

function chooseImg(file) {
    var file = file.files[0]
    var reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function () {
        console.log(this.result)
        banner_bg.style.background = 'url(' + this.result + ')'
        banner_bg.style.backgroundSize = '100%'
        banner_bg.sty