头像预览

<form action="FileuploadServlet" method="post" enctype="multipart/form-data">
        <img src="images/mrtx.webp" id="tp" style="width:200px;height: 200px;border-radius:50%" onclick="fils()"/>
        <input type="file" name="fname" style="display:none;" id="finp" onchange="wj(this)"/>
    <button type="submit">上传</button>
</form>

<script>

    function fils(){
        $("#finp").click();
    }

    function wj(ev){
        var sr=document.getElementById("tp");
        //获取文件对象
        let file = ev.files[0];
        //获取文件阅读器
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
            //给img的src设置图片url
            sr.setAttribute("src", this.result);
        }
    }

</script>

头像预览升级版

<%--
  Created by IntelliJ IDEA.
  User: 羡羡
  Date: 2021/7/3
  Time: 16:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <style>
        .over-avatar{
            -webkit-text-size-adjust: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp", sans-serif;
            -webkit-font-smoothing: antialiased;
            box-sizing: inherit;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            color: #FFF;
            font-size: 14px;
            text-align: center;
            line-height: 160px;
            border: 4px solid #EEE;
            border-radius: 50%;
            background: rgba(0,0,0,0.5);
            cursor: pointer;
            display: none;
        }
        #cf{
            width: 200px;
            height: 200px;
            border-radius:50%;
            background-color: aqua;
        }
    </style>
</head>
<body>
<h1>文件上传到COS云储存</h1>
<form action="FileuploadServlet" method="post" enctype="multipart/form-data">
    <div id="cf">
        <img src="images/mrtx.webp" id="tp" style="width:200px;height: 200px;border-radius:50%" />
        <input type="file" name="fname" style="display:none;" id="finp" onchange="wj(this)"/>
        <div class="over-avatar" style="margin-top:66px;margin-left:5px;" id="git-avatar-settings" onclick="fils()">
            更换头像
        </div>
    </div>
    <button type="submit">上传</button>
</form>
<video controls src="https://sls-cloudfunction-ap-guangzhou-code-1301165591.cos.ap-guangzhou.myqcloud.com/${filna}"></video>
<img src="https://sls-cloudfunction-ap-guangzhou-code-1301165591.cos.ap-guangzhou.myqcloud.com/${filna}"/>
<a href="CosDelServlet?key=${filna}">删除</a>
<a href="CosdowServlet?key=${filna}">下载</a>
</body>
<script>
    $("#cf").mouseover(function() {
        $(".over-avatar").css("display","block");
    })
    $("#cf").on("mouseout",function(){
        $(".over-avatar").css("display","none");
    })
    function fils(){
        $("#finp").click();
    }
    function wj(ev){
        var sr=document.getElementById("tp");
        //获取文件对象
        let file = ev.files[0];
        //获取文件阅读器
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
            //给img的src设置图片url
            sr.setAttribute("src", this.result);
        }
    }
</script>
</html>