-1

Primeiramente este código é só de teste antes de colocá-lo na página original. Na parte de selecionar as imagens ta tudo ok, porém quando eu deleto um campo de seleção, na qual pretendo RENOVAR os IDs (depois de deletar) em sequência novamente através do myFunDeleta(btnExc) e é onde apresenta o erro duplicando os IDs. Obs.: O erro acontece quando eu seleciono mais de uma imagem. Desde já agradeço, mas se alguém conseguir finalizar ele por completo agradeço mais ainda, pois quando é preenchida todas as 6 imagens apresenta um novo problema.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
    #conteinerFotos{
        display: flex;
    }
    .boxFoto{
        //position: relative;
        width: 160px;
        height: 160px;
        //background-color: pink;
        cursor: pointer;
        margin-right: 5px;
    }
    .boxFoto label{
        //position: relative;
        cursor: pointer;
    }
    .itemFoto{
        position: relative;
        background-color: #999;
        width: 100%;
        height: 100%;       
    }
    .fotoPost{
        //position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .excFotoPost{
        position: absolute;
        z-index: 10;
        top: 5px;
        right: 5px;
        cursor: pointer;
        padding: 2px 8px;
        display: none;
    }
    .inpFile{
        display: none;
    }
</style>

<div id="conteinerFotos">
    <div class="boxFoto boxFoto1">
        <label for="1">
            <div class="itemFoto">
                <img src="placeholder.png" class="fotoPost fotoPost1">
                <button class="excFotoPost excFotoPost1" name="1" onclick="myFunDeleta($(this));">X</button>
                <input type="file" class="inpFile inpFile1" name="inpFile1" id="1" onchange="myFunFile($(this)); myFunExiFoto($(this));">
            </div>
        </label>        
    </div>
</div>

Script

<script>    
    function myFunFile(fotoFile){
        var btns = $('#conteinerFotos .boxFoto');
        var qtd = btns.length;
        if (qtd >= 6) return;

        var novoIdFoto = parseInt(fotoFile.prop("id"));

        fotoFile.attr("onchange", "");
        fotoFile.attr("onchange", "myFunExiFoto($(this));");
        $("#conteinerFotos").append('<div class="boxFoto boxFoto' + parseInt(novoIdFoto+1) + '"><label for="' + parseInt(novoIdFoto+1) + '"><div class="itemFoto"><img src="placeholder.png" class="fotoPost fotoPost' + parseInt(novoIdFoto+1) + '"><button class="excFotoPost excFotoPost' + parseInt(novoIdFoto+1) + '" name="' + parseInt(novoIdFoto+1) + '" onclick="myFunDeleta($(this));">X</button><input type="file" class="inpFile inpFile' + parseInt(novoIdFoto+1) + '" name="inpFile' + parseInt(novoIdFoto+1) + '" id="' + parseInt(novoIdFoto+1) + '" onchange="myFunFile($(this)); myFunExiFoto($(this));"></div></label></div>');

    }

    function myFunExiFoto(exibeFoto){

        var idInputFoto = exibeFoto.prop("id");
        var imagem = document.querySelector('.inpFile'+idInputFoto).files[0];//Input file
        var preview = document.querySelector('.fotoPost'+idInputFoto);//Img

        var reader = new FileReader();

        reader.onloadend = function mostraFotoPost() {
            preview.src = reader.result;
        }

        if(imagem){ 
            reader.readAsDataURL(imagem);
            $(".excFotoPost"+idInputFoto).show();
        }else{  
            preview.src = "";
        }

    }

Nesse trecho do script é onde está o problema

    function myFunDeleta(btnExc){
        var id = btnExc.prop('name');

        $(".boxFoto"+id).remove();

        var myRow = 0;
        
        $(".boxFoto").each(function(){
            myRow = myRow + 1;
            $(".boxFoto").attr("class", "boxFoto boxFoto" + myRow);
            $(".boxFoto label").attr("for", myRow);
            $(".fotoPost").attr("class", "fotoPost fotoPost" + myRow);
            $(".excFotoPost").attr({ class:"excFotoPost excFotoPost" + myRow, name: myRow });
            $(".inpFile").attr({class: "inpFile inpFile" + myRow, name:"inpFile" + myRow, id: myRow});

        });

    }

    

</script>

1 Resposta 1

0

Finalizei. Vou deixar aqui postado caso alguém precise, ou até eu mesmo de um picker de selação de imagens com preview antes de cadastrar no banco. Criei para ter fácil manuseio e manutenção. Deixei um botão EDITAR caso queira editar no mesmo popUp ou página. Para controlar a quantidade de imagens edite o if (qtd >= 6) return.

function funSelFotoPost(fotoFile){
        var conta = $("#boxFotos .lblInputFotoPost");
        var qtd = conta.length;
        if (qtd >= 6) return;

        fotoFile.attr("onchange", "");
        fotoFile.attr("onchange", "myFunExiFoto($(this));");
        $("#boxFotos").append('<label for="" class="lblInputFotoPost lblInputFotoPost"><div class="linhaPostFoto linhaPostFoto"><img src="placeholder.png" class="imgInpFoto imgInpFoto" name=""><button class="btnExc btnExc" name="" onclick="delFotoPost($(this))">X</button><input type="file" name="inpFile" class="inpFile inpFile" id="" onchange="funSelFotoPost($(this));myFunExiFoto($(this));"></div></label>');


        var numId1 = 0;
        $(".lblInputFotoPost").each(function(){
            numId1 = numId1 + 1;
            $(this).attr("for", numId1);
            $(this).attr("class", "lblInputFotoPost lblInputFotoPost"+numId1);
        });
        var numId2 = 0;
        $(".linhaPostFoto").each(function(){
            numId2 = numId2 + 1;
            $(this).attr("class", "linhaPostFoto linhaPostFoto"+numId2);
        });
        var numId3 = 0;
        $(".imgInpFoto").each(function(){
            numId3 = numId3 + 1;
            $(this).attr("class", "imgInpFoto imgInpFoto"+numId3);
            $(this).attr("name", numId3);
        });
        var numId4 = 0;
        $(".btnExc").each(function(){
            numId4 = numId4 + 1;
            $(this).attr("name", numId4);
            $(this).attr("class", "btnExc btnExc"+numId4);
        });
        var numId5 = 0;
        $(".inpFile").each(function(){
            numId5 = numId5 + 1;
            $(this).attr("id", numId5);
            $(this).attr("class", "inpFile inpFile"+numId5);
        });        

    }



    function myFunExiFoto(exibeFoto){

        var idInputFoto = exibeFoto.prop("id");
        var imagem = document.querySelector('.inpFile'+idInputFoto).files[0];//Input file
        var preview = document.querySelector('.imgInpFoto'+idInputFoto);//Img

        var reader = new FileReader();

        reader.onloadend = function mostraFotoPost() {
            preview.src = reader.result;
        }

        if(imagem){ 
            reader.readAsDataURL(imagem);
            $(".btnExc"+idInputFoto).show();
        }else{  
            preview.src = "";
        }

    }


    function delFotoPost(btnExc){
        var idBtnEc = btnExc.prop("name");
        $(".lblInputFotoPost"+idBtnEc).remove();
        //$("#lblBtnSelFoto").show();

        var conta = $("#boxFotos .inpFile");
        var qtd = conta.length;
        var img = $(".imgInpFoto6").attr("src");
        //console.log(qtd);
        if (qtd == 5 && img != "placeholder.png") {

            //fotoFile.attr("onchange", "");
            //fotoFile.attr("onchange", "myFunExiFoto($(this));");
            $("#boxFotos").append('<label for="" class="lblInputFotoPost lblInputFotoPost"><div class="linhaPostFoto linhaPostFoto"><img src="placeholder.png" class="imgInpFoto imgInpFoto" name=""><button class="btnExc btnExc" name="" onclick="delFotoPost($(this))">X</button><input type="file" name="inpFile" class="inpFile inpFile" id="" onchange="funSelFotoPost($(this));myFunExiFoto($(this));"></div></label>');
        }

        var numId1 = 0;
        $(".lblInputFotoPost").each(function(){
            numId1 = numId1 + 1;
            $(this).attr("for", numId1);
            $(this).attr("class", "lblInputFotoPost lblInputFotoPost"+numId1);
        });
        var numId2 = 0;
        $(".linhaPostFoto").each(function(){
            numId2 = numId2 + 1;
            $(this).attr("class", "linhaPostFoto linhaPostFoto"+numId2);
        });
        var numId3 = 0;
        $(".imgInpFoto").each(function(){
            numId3 = numId3 + 1;
            $(this).attr("class", "imgInpFoto imgInpFoto"+numId3);
            $(this).attr("name", numId3);
        });
        var numId4 = 0;
        $(".btnExc").each(function(){
            numId4 = numId4 + 1;
            $(this).attr("name", numId4);
            $(this).attr("class", "btnExc btnExc"+numId4);
        });
        var numId5 = 0;
        $(".inpFile").each(function(){
            numId5 = numId5 + 1;
            $(this).attr("id", numId5);
            $(this).attr("class", "inpFile inpFile"+numId5);
        });

        

    }

    //===============================
    // EDITAR IMAGENS
    //===============================

    $("#editarPost").click(function(){
        $(".lblInputFotoPost").remove();

        $("#boxFotos").append('<label for="1" class="lblInputFotoPost lblInputFotoPost1"><div class="linhaPostFoto linhaPostFoto1"><img src="fotos/foto1.jpg" class="imgInpFoto imgInpFoto1" name="1"><button class="btnExc btnExc1" name="1" onclick="delFotoPost($(this))">X</button><input type="file" name="inpFile" class="inpFile inpFile1" id="1" onchange="funSelFotoPost($(this));myFunExiFoto($(this));"></div></label>');

        $("#boxFotos").append('<label for="2" class="lblInputFotoPost lblInputFotoPost2"><div class="linhaPostFoto linhaPostFoto2"><img src="fotos/foto2.png" class="imgInpFoto imgInpFoto2" name="2"><button class="btnExc btnExc2" name="2" onclick="delFotoPost($(this))">X</button><input type="file" name="inpFile" class="inpFile inpFile2" id="2" onchange="funSelFotoPost($(this));myFunExiFoto($(this));"></div></label>');

        $("#boxFotos").append('<label for="3" class="lblInputFotoPost lblInputFotoPost3"><div class="linhaPostFoto linhaPostFoto3"><img src="fotos/foto3.jpg" class="imgInpFoto imgInpFoto3" name="3"><button class="btnExc btnExc3" name="3" onclick="delFotoPost($(this))">X</button><input type="file" name="inpFile" class="inpFile inpFile3" id="3" onchange="funSelFotoPost($(this));myFunExiFoto($(this));"></div></label>');

        $("#boxFotos").append('<label for="4" class="lblInputFotoPost lblInputFotoPost4"><div class="linhaPostFoto linhaPostFoto4"><img src="fotos/foto4.jpg" class="imgInpFoto imgInpFoto4" name="4"><button class="btnExc btnExc4" name="4" onclick="delFotoPost($(this))">X</button><input type="file" name="inpFile" class="inpFile inpFile4" id="4" onchange="funSelFotoPost($(this));myFunExiFoto($(this));"></div></label>');

        $("#boxFotos").append('<label for="5" class="lblInputFotoPost lblInputFotoPost5"><div class="linhaPostFoto linhaPostFoto5"><img src="fotos/foto5.jpg" class="imgInpFoto imgInpFoto5" name="5"><button class="btnExc btnExc5" name="5" onclick="delFotoPost($(this))">X</button><input type="file" name="inpFile" class="inpFile inpFile5" id="5" onchange="funSelFotoPost($(this));myFunExiFoto($(this));"></div></label>');

        $("#boxFotos").append('<label for="6" class="lblInputFotoPost lblInputFotoPost6"><div class="linhaPostFoto linhaPostFoto6"><img src="fotos/foto6.jpg" class="imgInpFoto imgInpFoto6" name="6"><button class="btnExc btnExc6" name="6" onclick="delFotoPost($(this))">X</button><input type="file" name="inpFile" class="inpFile inpFile6" id="6" onchange="funSelFotoPost($(this));myFunExiFoto($(this));"></div></label>');

        $(".btnExc").show();
    });
#boxFotos{
        display: flex;
        grid-gap: 10px;
    }
    .linhaPostFoto{
        position: relative;
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    .imgInpFoto{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .btnExc{
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
        display: none;
    }
    .inpFile{
        display: none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<div id="boxFotos">
    <label for="1" class="lblInputFotoPost">
        <div class="linhaPostFoto linhaPostFoto">
            <img src="placeholder.png" class="imgInpFoto imgInpFoto" name="">           
            <button class="btnExc btnExc" name="" onclick="delFotoPost($(this))">X</button>
            <input type="file" name="inpFile" class="inpFile inpFile" id="1" onchange="funSelFotoPost($(this));myFunExiFoto($(this));">
        </div>
    </label>
</div>

<p>
    <h3>Botão editar imagens vindas do banco</h3>
    <button id="editarPost">Editar</button>
</p>

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    13/02/2022 às 15:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .