前端修炼之图片操作---添加

最新推荐文章于 2024-08-07 11:33:24 发布

polmJ

最新推荐文章于 2024-08-07 11:33:24 发布

阅读量637

点赞数

分类专栏：前端文章标签： html js 图片添加多个图片上传 input

本文链接：https://blog.csdn.net/belove_lucy/article/details/79101742

版权

本文介绍了如何在前端实现图片上传功能，包括隐藏input原始样式，通过label元素触发点击事件，以及限制最多上传8张图片。html和js代码示例提供了解决方案。

摘要由CSDN通过智能技术生成

实现结果图：
这里写图片描述

实现原理：该功能关键难点就是将input原始样式隐藏，将input的点击事件牵引到我们所想的地方或是图片上。我将每个input包含在他们相应的label元素中，利用for属性使他们相关联，这样label元素上就有了input的点击事件。然后将input的位子偏移到十万八千里，这样它就自然而然的隐藏了。

注：该代码可扩展，照片最大可上传数量可更改，但前提是有更大的放置空间，我将它限制最多能上传8张（因为8张刚刚好放下，且观赏性较佳）

html代码实现：

<div class="addition-part-main">
    <div class="part-cont" id="content">
        <label for="add1" id="num1">
            <img id="show1" src="" alt="">
            <div class="dele" id="dele1" style="display: none">
                <img src="../imgs/dele.png">
            </