0

estou fazendo uma preview de imagens com remoção da imagem. No caso eu preciso remover o elemento selecionado de dentro do array usando o id da tag img. Eu já consigo levar o id até a função que irá remover, porém, não consigo acessar o elemento de imagem pelo id do mesmo que está dentro do array.

Eis aqui o código para análise:

for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
          if (!f.type.match('image.*')) {
            continue;
          }

        var reader = new FileReader();

        reader.onload = function (e) {
            base64imgs.push("<img class='thumb' id='img_"+id+"' src='"+e.target.result+"' >");
        };

        reader.readAsDataURL(f);
    } 

$('#output_box_foto').append("<img class='thumb' id='img_"+id+"' src='"+URL.createObjectURL(files_show[i])+"' onclick='Remover("+id+")'>");

function Remover(id) {
    id_img_remove="#img_"+id;
    $(id_img_remove).remove(); 
    //Acima eu apenas removo visualmente a imagem, e abaixo seria o trecho de código que não sei como fazer para remover o elemento de dentro do meu array. Aqui no caso eu gostaria de remover o elemento IMG pelo Id dele de dentro do array
    base64imgs // Já tentei slice, preg...sem êxito
} 

1 Resposta 1

1

Amigo,

O array base64 contém strings e não objetos, então acredito que você precise buscar por texto e não seletor.

Seria algo assim:

var meuarray = [
        '<img id="img1" src="img1.jpg" />',
        '<img id="img2" src="img2.jpg" />',
        '<img id="img3" src="img3.jpg" />'
    ];

    var index = -1;

    $(meuarray).each(function (i, item) {

        if (item.indexOf('id="img1"') > -1)
        {
            index = i;
        }
    });

    if (index > -1) {
        meuarray.splice(index, 1);
    }

    console.log(meuarray);

Adicionalmente...

Caso você queira trabalhar com seletores do jQuery, sugiro que crie seus objetos com jQuery ao invés de append com texto. Por exemplo esse bloco:

$('#output_box_foto').append("<img class='thumb' id='img_"+id+"'src='"+URL.createObjectURL(files_show[i])+"' onclick='Remover("+id+")'>");

Ficaria assim:

var imgBoxFoto = $('<img>', {
    class: "thumb", 
    id: "meuid", 
    src:"minhaurl"
}).on("click", function(el){
    Remover(id);
});

$('#output_box_foto').append(imgBoxFoto);

Note que você também pode substituir o atributo onclick do html e registrar direto no objeto, sem que seu "id" e o nome do método fiquem expostos no html.

Transformando o seu array de texto (das tags img) em objetos ficariam assim:

    //array de objetos jQuery
    var meuarray2 = [
        $('<img>', { id: 'img1', src: 'img1.jpg' }),
        $('<img>', { id: 'img2', src: 'img2.jpg' }),
        $('<img>', { id: 'img3', src: 'img3.jpg' })
    ];

    //Os objetos criados em memória no jQuery ficam com formato de function "n.fn.init[1]"
    //Precisa transformá-los em objetos referenciáveis com o array:
    meuarray2 = $(meuarray2).map(function () { return this.toArray(); });

    //usa o filter passando o id -- Também poderia ser qualquer seletor (classe, data, type, etc)
    var index = meuarray2.index($(meuarray2).filter('#img1'));

    //faz o splice para eliminar o valor:
    if (index > -1) {
        meuarray2.splice(index, 1);
    }

    console.log(meuarray2);
14
  • Olá Ericson, eu entendi perfeitamente o que você quis dizer, realmente é uma forma muito melhor e mais organizada, porém, só me surgiu uma dificuldade, acho que talvez seja problema com o DOM, quando eu clico nas imagens para verificar o ID delas, ele pega sempre o último id. Coloquei exatamente da forma que você me mandou var imgBoxFoto = $('<img>', { class: "thumb", id: "meuid", src:"minhaurl" }).on("click", function(el){ Remover(id); }); 9/03/2017 às 11:30
  • No caso o evento Remover(id) , o parâmetro id sempre é o mesmo? Você pode usar atributos datas para armazenar valores nos elemento Ficaria assim: $('<img>', { class: "thumb", id: "meuid", src:"minhaurl" }).data('id', 'meuid').on("click", function(el){ Remover($(el.currentTarget).data('id')); });
    – Ericson
    9/03/2017 às 11:54
  • Nossa você é realmente incrível. Funcionou perfeitamente, não conhecia esse atributo data. Muito Obrigado Ericson! 9/03/2017 às 12:08
  • Você ainda poderia pegar o id do emento assim, sem usar data: function(el){ Remover($(el.currentTarget).attr('id')); }
    – Ericson
    9/03/2017 às 12:13
  • Ericson, só mais uma pergunta quando eu crio o array, como eu faço pra pegar um valor do objeto, no caso eu to tentando fazer assim seletor = $('<img>', { class: "thumb", id: "img_"+contador_img, src: e.target.result }); base64imgs.push(seletor); Como eu faço depois para pegar o src, por exemplo? 9/03/2017 às 12:52

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 .