JS上传文件图片回显到页面

1:我们先看看效果图吧

 2:点击修改头像我们选择文件上传,页面就会回显当前上传的图片

 

 3:因为我这里是完整的存储数据并且显示,点击保存就可以直接显示到我上面的头像

 4:下面我们就来看看代码吧

HTML页面的代码

accept="image/png,image/jpeg,image/gif,image/webp"是定义上传文件是什么类型的

    

        
    
    

        
            
            
        
    
    <%--        --%>
    

        
            修改头像
        
    
    <%--        --%>

css样式代码

/*修改头像部分*/
        #resource_head{
            margin: auto;
            width: 600px;
            height: 200px;
            overflow: hidden;
        }
        #resource_image{
            width: 100px;
            height: 100px;
            margin:20px auto;
            overflow: hidden;
            border: 1px solid rgb(62, 134, 160);
            border-radius: 50%;
        }
        #resource_img{
            width: 100%;
            height: 100%;
            object-fit:cover;
        }
        #resource_modification{
            width: 100px;
            height: 30px;
            margin:25px auto;
            text-align: center;
            line-height: 30px;
            color: #00c3ff;
            font-size: 12px;
        }

因为是截取了小部分效果是这个样子的,我们从简进行

 5:然后我们写JS的代码,就是一段代码就可以实现

$('#id_icon').change(function () {
        // 1.文件阅读器对象
        let myFileObj = new FileReader();
        // 2.获取用户上传的文件对象  $(this)[0].files[0]---jq里面无法对文件进行处理，需要转换成原生js
        if ($(this)[0].files[0] != null) {
            let fileObi = $(this)[0].files[0];
            myFileObj.readAsDataURL(fileObi); // 异步操作， IO操作
            // 4.利用文件阅读器将文件展示到前端页面，修改是src属性
            // 5. 等待文件阅读器加载完毕  myFileObj.result---图片路径
            myFileObj.onload = function () {
                $('#resource_img').attr('src', myFileObj.result)
            }
        }
    })

6:最后就可以实现点击更换头像回显图片到页面