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

1:我们先看看效果图吧

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

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

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

HTML页面的代码

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

1.  
   <div id="resource_head">
2.  
   <form enctype="multipart/form-data" method="post" id="myForm">
3.  
   <input type="file" id="id_icon" name="file" accept="image/png,image/jpeg,image/gif,image/webp" style="display: none">
4.  
   </form>
5.  
   <div id="resource_image">
6.  
   <label for="id_icon">
7.  
   <!--提交的头像展示-->
8.  
   <img src="../image/w_7.jpeg" id="resource_img">
9.  
   </label>
10.  
    </div>
11.  
    <%-- <label for="id_icon">--%>
12.  
    <div id="resource_modification">
13.  
    <label for="id_icon">
14.  
    修改头像
15.  
    </label>
16.  
    </div>
17.  
    <%-- </label>--%>
18.  
    </div>

css样式代码

1.  
   /*修改头像部分*/
2.  
   #resource_head{
3.  
   margin: auto;
4.  
   width: 600px;
5.  
   height: 200px;
6.  
   overflow: hidden;
7.  
   }
8.  
   #resource_image{
9.  
   width: 100px;
10.  
    height: 100px;
11.  
    margin:20px auto;
12.  
    overflow: hidden;
13.  
    border: 1px solid rgb(62, 134, 160);
14.  
    border-radius: 50%;
15.  
    }
16.  
    #resource_img{
17.  
    width: 100%;
18.  
    height: 100%;
19.  
    object-fit:cover;
20.  
    }
21.  
    #resource_modification{
22.  
    width: 100px;
23.  
    height: 30px;
24.  
    margin:25px auto;
25.  
    text-align: center;
26.  
    line-height: 30px;
27.  
    color: #00c3ff;
28.  
    font-size: 12px;
29.  
    }

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

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

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

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

这篇好文章是转载于：学新通技术网