0

me encontré con una pregunta relacionada a lo que estoy haciendo que es la vista previa de múltiples imágenes:

$(document).ready(function(){
  $('#btn_add').click(function(){
   $('#modal').html('<label>Selecciona las imagenes</label><br><input type="file" id="fl_img" name="fl_img" multiple><div id="resto_form"></div>');
  });
  $(document).on('change','#fl_img',function(e){
    var input =document.getElementById('fl_img');
    var cantidad =input.files.length;
//con esto valido que no tenga una extension aparte de jpg y png
    for (var i = 0; i < cantidad; i++) 
        {
            var nombre = input.files[i].name;
            var ext = nombre.substring(nombre.lastIndexOf("."));
            if (ext != ".png" && ext != ".jpg")
            {
                var valida = false;
                break;
            }
            else
            {
                var valida = true;
            }
        }
//aqui se checa que todos tengan una extension valida
    if (valida) 
        {
    //limpio el area del form
      $('#forms_img').html('');
      //genero el campo del nombre y los separo por un id con el numero de imagen
            for (var i = 0; i < cantidad; i++) 
            {
                $('#resto_form').append('<div id="img'+i+'">    <h3>Imagen Cargada '+(i+1)+'</h3>   <label>Nombre:</label>  <input type="text" id="txt_nombre_img'+i+'" name="txt_nombre_img'+i+'" maxlength="30"></div><br><br>');
        //con esta funcion deberia encargarse de la pre vista
                previsualizarImg(e, i);
                  
            }
        }
        else
        {
    //en caso de que no sean validos las extensiones manda alert y limpio el file
      alert('este archivo no es valido o no se ha seleccionado archvio');
            $('#fl_img').val('');
        }
  });
});
//esta es la funcion previsualizacion
function previsualizarImg(e,i)
{
      var file = e.target.files[i];
    
      var reader = new FileReader();

      reader.onload = function(e){
            var result = e.target.result;
        $('#img'+i).append(`<img src="${result}" width="450" height="300">`); //Asignamos el src dinámicamente a un img dinámico también
      }
      reader.readAsDataURL(file);     
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Presiona para agregar:</label>
<input type="button" id="btn_add" value="ADD">
<!--lo pongo asi para simular el modal y el agregar los elementos dinamincamente-->
<div id="modal">

</div>

Pero también ocupo el poder eliminar la imagen y su previsualización, esto en caso de equivocarme al elegir la imagen, ¿ como podría lograr esto con JavaScript ?

Este código me permite previsualizar la imagen pero en caso de dar clik dos veces para agregar mas imágenes se sobrescriben:

introducir la descripción de la imagen aquí

Por ejemplo aquí aparece dos veces imagen 1, cuando se debería reemplazar por la nueva opcion seleccionada, aparte de poder eliminarlas, les agradecería sus ideas para poder resolverlo gracias

4
  • 1
    y si pones ` $('#img'+i).empty()` antes del ` $('#img'+i).append(......`
    – Yussef
    Commented el 2 mar. 2023 a las 16:55
  • Hola, gracias, si en efecto puse $('#prueba').empty(); antes del for y ya no se sobrescriben :), ya solo me falta poder eliminarlas de la fila. Commented el 2 mar. 2023 a las 18:16
  • Buen día Andrea, has podido poner la opción de eliminar cada vista previa previa?, si es asi lo podrás compartir? Gracias
    – Jorge B
    Commented el 28 abr. 2023 a las 11:38
  • Hola Jorge, al final no puse opción para eliminarlas, no fue requerido, ya que al poner $('#prueba').empty(); antes del for se eliminan las imágenes que estaban y se remplazan por las nuevas. Saludos. Commented el 28 abr. 2023 a las 18:45

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.