前端用户信息管理界面（上传图片到头像并显示）

最新推荐文章于 2023-04-13 13:47:24 发布

望屿

最新推荐文章于 2023-04-13 13:47:24 发布

阅读量4.5k

点赞数 5

分类专栏：前端源码学习和手撕文章标签： js css vue html javascript

本文链接：https://blog.csdn.net/darabiuz/article/details/119039323

版权

本文介绍了一个前端用户信息管理界面中头像上传的实现过程，包括使用HTML隐藏file表单，通过点击图片触发上传，CSS美化，以及JavaScript进行文件读取和图片替换的步骤。

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

界面展示如下

在这里插入图片描述
以下为头像图片上传代码实现步骤

html部分：
我们需要通过file表单来上传图片，但是为了美观我们选择把file表单隐藏，通过直接点击图片触发file表单的形式上传文件

 <div class="imgupload">
                                <p>点击添加头像</p>
                                <img src="./img/添加.png" alt="" id="IsImgEmployeePicture"
                                    @click="chooseImageFile('EmployeePicture')">
                                <input type="file" name="fileEmployeeImage" id="EmployeePicture" accept="image/*" hidden
                                    @change='showImgToView("EmployeePicture")'>
                            </div>

css部分

 img {
            width: 160px;
            height: 130px;
            display: block;
            margin: 0 0 20px 40%;
        }

        .imgupload {
            width: 100%;
            text-align: center;
        }

        p {
            color: rgb(139, 138, 136);
            font-size: 14px;
        }

js部分
step1：点击图片时触发使得表单被点击的函数

step2. 创建fileReader对象，创建正则表达式判断是否为文件类型

 var fileReader = new FileReader();
regexImageFile = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|