3

Estoy realizando un modulo donde se suben imágenes de manera múltiple sin embargo estas imágenes van acompañadas de un nombre en la BD, y para esto estoy generando un campo de texto con la una imagen abajo de este para que el usuario escriba el nombre de la imagen pero de los ejemplos que he buscado en Internet solo he encontrado pre visualizar una imagen y yo requiero que sea varias...

intente adaptar ese código para que lo realizara adecuadamente pero sin embargo no logro que muestre otra imagen aparte de la primera seleccionada

aquí un ejemplo de lo que he intentado:

$(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)
{
	$('#img'+i).append('<img src="" width="450" height="300">');

      var file = e.target.files[i];
    
      var reader = new FileReader();

      reader.onload = function(e){
		var result = e.target.result;
 		$('#img0 > img').attr("src",result);
      }
      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>

5
  • Y si despues de cargar la primera vuelves a repetir el form para poder cargar otra o cual es tu objetivo real yo digo algo como esto es.stackoverflow.com/a/164015/134724 Commented el 7 ago. 2019 a las 16:25
  • @EdgarVazquez estuve viendo el código del enlace que colocaste y no es precisamente lo que busco ya el que realizo la publicación buscaba optimizar lo que es el insertar las tablas añadiendo 1 en 1 los campos al igual que el poder eliminarlos de la misma manera sin tener que insertar nuevamente todos ellos y volverlos a rellenar o eso es lo que me parecio. en mi caso requiero insertar los campos dependiendo de el file al igual que visualizar la imagen y sobre eliminar ya me he resignado dado que no se puede eliminar un elemento del filelist del input file. pero gracias :D
    – persona_A
    Commented el 7 ago. 2019 a las 16:37
  • 1
    Pero no es exactamente la idea es que lo que tienes si tu le das a un boton añadir otro esntonces copia ese formulario y asi ya puedes agregar otra imagen con su respectivo nombre todo dentro de un DIV y despues solo seria recorrer el div e ir insertando en lo que necesites Commented el 7 ago. 2019 a las 16:40
  • a ok así no seria necesario pre visualizarla ya que cada campo tendría su propio input file y su campo de nombre o estoy entendiendo mal?
    – persona_A
    Commented el 7 ago. 2019 a las 16:46
  • Si y tambien podrias hacerlo para mostrar por cada uno que imagen tien Commented el 7 ago. 2019 a las 16:55

1 respuesta 1

1

Al parecer tienes solo un error, ya que estás indicando que la imagen va a cambiar solo en el elemento con id #img0, corrigiendo eso todo funciona bien, básicamente seleccionas varios archivos presionando CTRL y todos se previsualizarán:

$(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>

1
  • si, justo hace unos minutos me di cuenta de esto. gracias :D
    – persona_A
    Commented el 7 ago. 2019 a las 17:23

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.