input:button与input:file怎么绑定

问题遇到的现象和发生背景

需要使用input:file来选择图片，但这样式很丑，如下图

img


想改成下面这种，input:file被input:button覆盖(或者input:file被隐藏)，

img


点input:button，就能达到直接点input:file的效果。具体的JavaScript代码该如何写？求指点

问题相关代码

链接：https://pan.baidu.com/s/13eqCJ_4WhBLjSNxCD0AsGw
提取码：h4ps

可用这样去写，但是就不知道兼容性好不好啦，大多数浏览器应该都支持吧。
效果

img

<html>

<head>
    <title>添加宠物</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="w-100 mt-5" style="min-width: 1200px;">
        <div class="w-100 text-center">
            <h2 style="color: #FBFCFC;">社区宠物诊所</h2>
        </div>
        <div class="bg-primary">
            <ul class="nav">
                <li class="nav-item"><a class="nav-link text-white" onclick="history.back(-1)" style="font-size: 20px"
                        title="返回上一个页面">返回</a></li>
            </ul>
        </div>
        <div class="w-50 mt-4 text-center" style="margin-right:auto;margin-left:auto;">
            <form action="${pageContext.request.contextPath}/PetServlet?m=add" method="post"
                enctype="multipart/form-data">
                <div class="input-group mb-3 input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text">主人姓名&nbsp;:</span>
                    </div>
                    <input type="text" name="cname" disabled="disabled" class="form-control" value="${param.cname}" />
                    <input type="hidden" name="cid" value="${param.cid}" />
                </div>
                <div class="input-group mb-3 input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text">宠物姓名&nbsp;:</span>
                    </div>
                    <input type="text" name="name" class="form-control" placeholder="请输入要添加宠物的姓名" />
                </div>
                <div class="input-group mb-3 input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text">出生日期&nbsp;:</span>
                    </div>
                    <input type="text" name="birthdate" class="form-control" placeholder="请输入要添加宠物的出生日期" />
                </div>
                <div class="input-group mb-3 input-group-lg">
                    <div class="input-group-prepend">
                        <span class="input-group-text">宠物照片&nbsp;:</span>
                    </div>
                    <div class="form-control p-0" style="position: relative;">
                        <!-- <input type="file" id="file" name="photo" class="" placeholder="" /> -->
                        <input type="button" id="button"
                            style="position: absolute;right: 0px !important; top:0px !important; " class=" w-100 h-100"
                            value="请选择要添加宠物的照片" onclick="uploadClick()" />
                    </div>
                </div>
                <div class=" btn-group">
                    <input type="submit" value="提交" class="btn btn-primary" />
                    <input type="button" value=" " class="btn btn-white " />
                    <input type="reset" value="重置" class="btn btn-primary" />
                </div>
                <div class="mt-2" style="color: crimson">
                    <%=request.getAttribute("msg")==null?"":request.getAttribute("msg")%>
                </div>



            </form>
        </div>
    </div>

    <script>
        function uploadClick() {
            const fileInput = document.createElement('input');
            fileInput.setAttribute('type', 'file');
            fileInput.setAttribute('accept', '*');
            fileInput.addEventListener('change', () => {
                const file = fileInput.files[0];
                console.log(file);
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    console.log(e);
                    // 上传图片到服务器
                    // const data = new FormData();
                    // data.append('file', file);
                    // let r = new XMLHttpRequest();
                    // r.open("post", address + `file`);
                    // r.onloadend = () => {
                    //     console.log(JSON.parse(r.responseText))
                    // }
                    // r.send(data);
                };
            });
            fileInput.click();
        } 
    </script>
</body>

</html>