寒湮. 2022-05-11 22:59 采纳率: 50%
浏览 73
已结题

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

  • 写回答

1条回答 默认 最新

  • 林一怂儿 前端领域新星创作者 2022-05-12 09:20
    关注

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

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 5月20日
  • 已采纳回答 5月12日
  • 创建了问题 5月11日

悬赏问题

  • ¥170 如图所示配置eNSP
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题：需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥15 键盘指令混乱情况下的启动盘系统重装