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

最新推荐文章于 2024-12-03 21:46:01 发布

原创最新推荐文章于 2024-12-03 21:46:01 发布 · 677 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #图片添加 #多个图片上传 #input

前端专栏收录该内容

24 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现原理：该功能关键难点就是将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">
            </div>
            <input type="file" name="pic1" id="add1">
        </label>
    </div>
    <div class="part-btn">
        <button id="sure">确认</button>
        <button id="cancel">取消</button>
    </div>
</div>

照旧，css样式就不贴了，将每个元素位置一一放置清楚就好了。

js代码实现：

var cnt = 1, flag = 0, sum = 1;  //sum为添加图片总数

$('#addPic').on('click', function() {
    $('#addition').toggle();
});

$('#cancel').on('click', function() {
    $('#addition').hide();
});

$('#sure').on('click', function() {
    //确认后操作
    $('#addition').hide();
});

//每添加完出现一个新的待添加框（若达到最大限制，则不出现）
function addNext() {
    if(nowId < cnt || sum == 8) {  //总数限定，不得多于8张
        return ;
    }
    cnt++;
    sum++;
    var area = document.getElementById('content');
    var str = '<label for="add' + cnt + '" id="num' + cnt + '">' + 
     '<img id="show' + cnt + '" src="" alt=""><div class="dele" id="dele' + cnt + '" style="display: none">' +
    '<img src="../imgs/dele.png"></div><input type="file" name="pic' + cnt + '" id="add' + cnt + '"></label>';
    area.innerHTML += str;
    addMethod();
}

//将上传图片展示出来
function showPic(num) {
    var pic = new FileReader();
    var str = 'add' + num;
    var file = document.getElementById(str).files[0];
    pic.readAsDataURL(file);
    pic.onload = function(e) {
        tempic = this.result;
        str = 'show' + num;
        document.getElementById(str).src = this.result;
        document.getElementById('dele'+num).style.display = "";
        addNext();
    };
}

//标明当前所操作的图片num
function setNum(num) {
    nowId = num;
    document.getElementById('add'+num).onchange = function() {
        showPic(num);
    };
}

//删除该图片
function delePic(item) {
    flag = 1;
    var area = document.getElementById('num'+item);
    area.setAttribute('for', '-1');
    area.style.display = "none";
    sum--;
    if(sum == 7) {    //总数限定，少于7可再添加
        addNext();
    }
}

//设置每张图片框的点击事件和删除事件
function addMethod() {
    for(var i = 1; i <= cnt; i ++) {
        let item = i;
        document.getElementById('num'+item).onclick = function() {
            if(flag == 0) {
                setNum(item); 
            } else {
                flag = 0;
                return ;
            }
        };
        document.getElementById('dele'+item).onclick = function(event) {
            delePic(item);
        };
    }
}

addMethod();

差不多就是这样了，请多多指教^ ^