如何用input标签上传多个图片并回显

最新推荐文章于 2025-05-23 16:56:05 发布

奇迹码农

最新推荐文章于 2025-05-23 16:56:05 发布

阅读量2.3w

点赞数 19

CC 4.0 BY-SA版权

文章标签： html jquery

本文链接：https://blog.youkuaiyun.com/weixin_42225141/article/details/80343812

如何用input标签上传多个图片并回显

本文主要记录如何用input标签和jquery实现多图片的上传和回显，不会涉及后端的交互，大概的效果看图
input标签上传多个图片并回显

我们从零来做一个这样的demo

第一步：
我们先完善一下我们的页面，默认的input-file标签非常丑，我们美化一下它，不会的可以百度一下，就是外面套个盒子，设置input的opacity为0，然后外面的盒子设计成我们喜欢的样式即可，我就随便做了一下。

这里写图片描述

还是放一下源码，只谈效果，不放源码的都是耍流氓
这是body

<body>
    <div class="uploadImgBtn" id="uploadImgBtn">
        <input class="uploadImg" type="file" name="file" multiple id="file">
    </div>
</body>

这是css的样式

<style>

    .uploadImgBtn {

        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        background: url("img/plus.png") no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .uploadImgBtn .uploadImg {
        position: absolute;
        right: 0;
        top