手撸团购上传多张头图功能

因为是手撸BUG颇多，经过反复修改才得以完善

以下功能演示

 初始化

选择头图	  只有一张不会有删除按钮   头图banner跟随第一张改变而改变

上传第二张出现删除按钮，

一次能上传五张，采用flex布局平分间距

html代码

<!--头图-->
                <form id="bannerFom">
                    <div class="imgBox">
                        <ul onclick="getHeadImg(1)" id="img_1">    <!--传图片的id 图片的id以英文数字命名 以便上传图片对应 最多五个  否则修改对应JS-->
                            <li><img src="../../images/g_yiqi/icon/addmaximg.png" alt=""></li>
                            <li style="z-index: 22"><img src="../../images/qmchp/banner/banner.png" alt=""></li>
                            <li><input type="hidden" name="img" value="../../images/qmchp/banner/banner.png"></li>
                            <li class="delT"></li>
                        </ul>
                        <ul onclick="getHeadImg(2)" id="img_2">    <!--传图片的id 图片的id以英文数字命名 以便上传图片对应 最多五个  否则修改对应JS-->
                            <li><img src="../../images/g_yiqi/icon/addmaximg.png" alt=""></li>
                            <li style="z-index: 22"><img src="" alt=""></li>
                            <li><input type="hidden" name="img"></li>
                            <li class="delT"></li>
                        </ul>
                        <ul onclick="getHeadImg(3)" id="img_3" style="display: none">    <!--传图片的id 图片的id以英文数字命名 以便上传图片对应 最多五个  否则修改对应JS-->
                            <li><img src="../../images/g_yiqi/icon/addmaximg.png" alt=""></li>
                            <li style="z-index: 22"><img src="" alt=""></li>
                            <li><input type="hidden" name="img"></li>
                            <li class="delT"></li>
                        </ul>
                        <ul onclick="getHeadImg(4)" id="img_4" style="display: none">    <!--传图片的id 图片的id以英文数字命名 以便上传图片对应 最多五个  否则修改对应JS-->
                            <li><img src="../../images/g_yiqi/icon/addmaximg.png" alt=""></li>
                            <li style="z-index: 22"><img src="" alt=""></li>
                            <li><input type="hidden" name="img"></li>
                            <li class="delT"></li>
                        </ul>
                        <ul onclick="getHeadImg(5)" id="img_5" style="display: none">    <!--传图片的id 图片的id以英文数字命名 以便上传图片对应 最多五个  否则修改对应JS-->
                            <li><img src="../../images/g_yiqi/icon/addmaximg.png" alt=""></li>
                            <li style="z-index: 22"><img src="" alt=""></li>
                            <li><input type="hidden" name="img"></li>
                            <li class="delT"></li>
                        </ul>
                    </div>
                </form>
            </div>

css样式

.imgBox{
    width: 9.2rem;
    display: -webkit-flex;
    display: flex;
    margin-bottom: 0.4rem;
}
.imgBox ul{
    width: 1.64rem;
    height: 1.1733333333333333rem;
    border-radius: 0.08rem;
    background:rgba(0,0,0,.6);
    position: relative;
    margin-left: 0.26666666666666666rem;
}
.imgBox ul li{
    width: 1.64rem;
    height: 1.1733333333333333rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}
.imgBox ul:first-child{
    margin-left: 0;
}
.imgBox ul li:first-child img{
    width: 0.64rem;
    height: 0.64rem;
}
.imgBox ul li:nth-child(2) img{
    width: 1.64rem;
    height: 1.1733333333333333rem;
}
.imgBox ul .delT{
    width: 0.45rem;
    height: 0.45rem;
    background: url(../../../images/g_yiqi/icon/del.png) no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    position: absolute;
    top: -0.21333333333333335rem;
    left: 1.4rem;
    cursor: pointer;
    z-index: 33;
    display: none;

}

js代码

//封装上传头图
function htmlHeadImg() {
    var str = '';
    str += `
        <!--头图上传-->
        <div class="head_img">
            <div class="head_imgBox">
                <div class="head_imgBtn">
                    <div class="upload_head">
                    <input class="image" type="file" name="upfile" id="file">
                        <s></s><span>上传图片</span>
                    </div>
                    <ul>
                        <li onclick="moveHeadImg()">
                            <span>取消</span>
                        </li>
                        <li onclick="moveHeadImg()">
                            <span>确定</span>
                        </li>
                    </ul>
                </div>
                <div class="head_content">
                    <div class="head_contentBox">
                        <div class="head_contentImg">
                            <div class="head_contentImg_box">
                                <ul id=".boxx">
                                    <li>
                                        <img src="../../images/g_yiqi/banner/banner.png" alt="">
                                    </li>
                                    <li>
                                        <img src="../../images/g_yiqi/banner/bannerone.png" alt="">
                                    </li>   
                                     <li>
                                        <img src="../../images/g_yiqi/banner/banner.png" alt="">
                                    </li>
                                    <li>
                                        <img src="../../images/g_yiqi/banner/bannerone.png" alt="">
                                    </li>                                
                                     <li>
                                        <img src="../../images/g_yiqi/banner/banner.png" alt="">
                                    </li>
                                    <li>
                                        <img src="../../images/g_yiqi/banner/bannerone.png" alt="">
                                    </li>   
                                </ul>
                            </div>
                        </div>
                        <div class="head_contentText">
                            <ul>
                                <li>团购</li>
                            </ul>
                            <ul>
                                <li>教育</li>
                            </ul>
                            <ul>
                                <li>节日</li>
                            </ul>
                            <ul>
                                <li>摄影</li>
                            </ul>
                            <ul>
                                <li>生活</li>
                            </ul>
                            <ul>
                                <li>娱乐</li>
                            </ul>
                            <ul>
                                <li>旅行</li>
                            </ul>
                            <ul>
                                <li>亲子</li>
                            </ul>
                            <ul>
                                <li>购物</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="imgid">
        
        </div>
    `;
    $("body").append(str);

    //点击头图类型
    $(document).on('click', ".head_contentText ul", function () {
        $(this).css("color","#fe885e");
        $(this).siblings().css("color","#fff");
    });


    setTimeout(()=>{
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isUc = u.indexOf('UCBrowser') > -1;    //uc浏览器
        //var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(isAndroid&&isUc){		/*注释5*/
            $('#boxx').on('touchstart',function(){
                $(document).on('touchmove',function(e){
                    e.preventDefault();
                    console.log(1111)
                });
                $(document).on('touchend',function(){
                    $(document).unbind();
                    console.log(22222)
                });
            });
        }
    },10)
}

---

//隐藏上传头图
function moveHeadImg() {
    $(".head_img").css("bottom","-5.093333333333334rem");
    $(".footers").css("bottom","0");
}

---

// 调用上传头图功能
function getHeadImg(imgid) {
    var imgid = imgid;
    arrAt.push(imgid);                                     //push数组
    var imgID = arrAt.slice(-1).shift();                   //slice() 方法可从已有的数组中返回选定的元素。    -1最后一个
    var idss = imgID;
    $("#imgid").html(idss);                             //选择头图ID

    $(".head_img").css("bottom","0");                   //显示上传头图
    $(".footers").css("bottom","-1.5066666666666666rem");
    //选择头图
    $(document).on('click', ".head_contentImg_box ul li img", function () {
        $(this).parent().css("margin-bottom","0.26666666666666666rem").siblings().css("margin-bottom","0");
        var img = $(this)[0].src;                           //保存当前图片路径
        //传入的ID  添加到对应的ID中
        if ($("#imgid").text() == 1){
            $("#img_1").css("background-color","#fed6a3").find("li:first").css("display","none");
            $("#img_1").find("li:nth-child(2) img").attr("src",img);
            $("#img_1").find("li:nth-child(3) input").val(img);
            $(".main_urls").attr("src",img)
        }
        else if ($("#imgid").text() == 2){
            $("#img_2").css("background-color","#fed6a3").find("li:first").css("display","none");
            $("#img_2").find("li:nth-child(2) img").attr("src",img);
            $("#img_2").find("li:nth-child(3) input").val(img);
            $("#img_3").css("display","block");
            $("#img_2 .delT").css("display","block");
            $("#img_1 .delT").css("display","block")
        }
        else if ($("#imgid").text() == 3){
            $("#img_3").css("background-color","#fed6a3").find("li:first").css("display","none");
            $("#img_3").find("li:nth-child(2) img").attr("src",img);
            $("#img_3").find("li:nth-child(3) input").val(img);
            $("#img_4").css("display","block");
            $("#img_3 .delT").css("display","block");
        }
        else if ($("#imgid").text() == 4){
            $("#img_4").css("background-color","#fed6a3").find("li:first").css("display","none");
            $("#img_4").find("li:nth-child(2) img").attr("src",img);
            $("#img_4").find("li:nth-child(3) input").val(img);
            $("#img_5").css("display","block")
            $("#img_4 .delT").css("display","block");
        }
        else{
            $("#img_5").css("background-color","#fed6a3").find("li:first").css("display","none");
            $("#img_5").find("li:nth-child(2) img").attr("src",img);
            $("#img_5").find("li:nth-child(3) input").val(img);
            $("#img_5 .delT").css("display","block");
        }
    });

    //第一张上传图片   //flie改变时
    $_("file").onchange = function() {
        var formData = new FormData();
        formData.append('upfile', $('#file')[0].files[0]);
        $.ajax({
            headers: {
                Authorization: 'Bearer ' + token,
            },
            url: apiUrl + "upload?action=image",
            data: formData,
            type: "POST",
            cache: false,
            processData: false,
            contentType: false,
            success: function (data) {
                // console.log(data);
                if (data.code == 200){
                    if ($("#imgid").text() == 1){
                        $("#img_1").css("background-color","#fed6a3").find("li:first").css("display","none");
                        $("#img_1").find("li:nth-child(2) img").attr("src",imgychUrl+data.data.url);
                        $("#img_1").find("li:nth-child(3) input").val(imgychUrl+data.data.url);
                        $(".main_urls").attr("src",imgychUrl+data.data.url)
                    }
                    else if ($("#imgid").text() == 2){
                        $("#img_2").css("background-color","#fed6a3").find("li:first").css("display","none");
                        $("#img_2").find("li:nth-child(2) img").attr("src",imgychUrl+data.data.url);
                        $("#img_2").find("li:nth-child(3) input").val(imgychUrl+data.data.url);
                        $("#img_3").css("display","block");
                        $("#img_2 .delT").css("display","block");
                        $("#img_1 .delT").css("display","block")
                    }
                    else if ($("#imgid").text() == 3){
                        $("#img_3").css("background-color","#fed6a3").find("li:first").css("display","none");
                        $("#img_3").find("li:nth-child(2) img").attr("src",imgychUrl+data.data.url);
                        $("#img_3").find("li:nth-child(3) input").val(imgychUrl+data.data.url);
                        $("#img_4").css("display","block");
                        $("#img_3 .delT").css("display","block");
                    }
                    else if ($("#imgid").text() == 4){
                        $("#img_4").css("background-color","#fed6a3").find("li:first").css("display","none");
                        $("#img_4").find("li:nth-child(2) img").attr("src",imgychUrl+data.data.url);
                        $("#img_4").find("li:nth-child(3) input").val(imgychUrl+data.data.url);
                        $("#img_5").css("display","block");
                        $("#img_4 .delT").css("display","block");
                    }
                    else{
                        $("#img_5").css("background-color","#fed6a3").find("li:first").css("display","none");
                        $("#img_5").find("li:nth-child(2) img").attr("src",imgychUrl+data.data.url);
                        $("#img_5").find("li:nth-child(3) input").val(imgychUrl+data.data.url);
                        $("#img_5 .delT").css("display","block");
                    }


                }
            }
        })
    };

}

---

//添加一张出现一张添加
function touTpxs(){
    let lnt = $('.imgBox ul').length;

    let banner = $('#bannerFom').serializeArray();

    for (let i =0;i<banner.length-1;i++){

        if (banner[i].value != ""){
            $("#figs").html(111);
        }else {
            $("#figs").html("")
        }
    }
    for (let i=0;i<lnt;i++){
        $('.imgBox ul').eq(i).attr("id","img_"+[i+1]);
        $('.imgBox ul').eq(i).attr("onclick","getHeadImg("+[i+1]+")");
        // console.log(i)
    }
    if ($("#img_3").css("display") == "none"){
        $("#img_1 .delT").css("display","none")
    }

    if ($("#figs").html() == 111){
        $("#img_5").css("display","block");

    }
}

---

// 删除头图
var flag = true;
$(document).on('click', ".imgBox ul .delT", function () {
    let lnt = $('.imgBox ul').length;
    $(this).parent().remove();
    if (lnt == 6){

    }else {
        addTt()
    }
    touTpxs();

});

---

//添加头图
function addTt() {
    let lnt = $('.imgBox ul').length;
    let str = '';
    str += `
        <ul onclick="getHeadImg(${lnt+1})" id="img_${lnt+1}" style="display: none">    <!--传图片的id 图片的id以英文数字命名 以便上传图片对应 最多五个  否则修改对应JS-->
            <li><img src="../../images/g_yiqi/icon/addmaximg.png" alt=""></li>
            <li style="z-index: 22"><img src="" alt=""></li>
            <li><input type="hidden" name="img"></li>
            <li class="delT" style="display: none"></li>
        </ul>
    `;
    $(".imgBox").append(str)

}

下回详细分解…