1

tengo una tabla con 4 inputs mas un input tipo file, lo que quiero hacer es que al darle al botón me añada los datos... eso hace, los añade, pero al momento de elegir una imagen solo me pone la ruta donde esa img aparece, no me pone la imagen en si a lo mejor alguien sabe si estoy haciendo mal algo o que? capaz esta no es la forma y la estoy haciendo mal o no sé!!!

function cargarDatos(){

    //obtener los datos que ingresó el usuario
    let image = document.querySelector("#image").value;
    let title = document.querySelector("#title").value;
    let descripcion = document.querySelector("#descripcion").value;
    let ubicacion = document.querySelector("#ubicacion").value;
    let precio = document.querySelector("#precio").value;

    //obtener el elemento tabla
    let tabla = document.querySelector("#tabla");

    //crear el contenido de la tabla
    let cuerpoTabla = `
    <tr>
        <td>${image}</td>
        <td>${title}</td>
        <td>${descripcion}</td>           
        <td>${ubicacion}</td>
        <td>${precio}</td>
        <br>
    </tr>`
    ;      

    tabla.innerHTML += cuerpoTabla;
}

function crearTabla(){
    const tabla = document.createElement("table");
    const tr = document.createElement("tr");
    const cabezal = document.createElement("thead")
    for(let i = 0; 1 < 4; i++){
        const th = document.createElement("th");
        switch (i){
            case 0:
                th.innerText = "image"
                break;
                case 1:
                th.innerText = "title"
                break;
                case 2:
                th.innerText = "descripcion"
                break;
                case 3:
                th.innerText = "ubicacion"
                break;
                case 4:
                th.innerText = "precio"
                break;
                default:
                break;
        }

        thead.appendChild(th);
    }
    tr.appendChild(thead);
    tabla.appendChild(tr);
    document.body.appendChild(tabla);
}

crearTabla();



<form action="">
      <label for="image"></label>
      <input type="file" id="image" accept="image/*">
      <br><br>
      <label for="title">Título</label>
      <input type="text" id="title">
      <br>
      <label for="descripcion">Descripción</label>
      <input type="text"id="descripcion">
      <br>
      <label for="ubicacion">Ubicación</label>
      <input type="text" id="ubicacion">
      <br>
      <label for="precio">Precio</label>
      <input type="text" id="precio">
  </form>
  <br>
  <button class="btn btn-primary" id="cargar" onclick="cargarDatos()">Añadir</button>
  <br>
  <br>
  <table>
      <tr>
          <thead>
              <th>Imagen</th>
              <th>Título</th>
              <th>Descripción</th>
              <th>Ubicación</th>
              <th>Precio</th>    
          </thead>
      </tr>
      <tbody id="tabla">
  
      </tbody>
  </table>
2

2 respuestas 2

1

Si tan solo quieres mostrar la imagen sin subirla, esto es lo que andas buscando creo.

Realiza estos cambios dentro de la función cargarDatos():

  1. Comenta o elimina esta línea:
let image = document.querySelector("#image").value;

pues vamos a necesitar ese nombre image para referirnos al id del input que estás usando el tipo file más adelante.

  1. Agrega este trozo de código en dicha función:
  const [file] = image.files
  if (file) {
    img = `<img src="` + URL.createObjectURL(file) + `" width="150px;">`
  } else {
    img = 'Sin imagen'
  }

que básicamente lo que hace es definir una constante denominada file que contiene el objeto de la imagen seleccionada en el input. El condicional siguiente verifica si está bien asignada, y en cuyo caso definimos una nueva variable img que va a contener el elemento <img> que apuntará correctamente a la imagen seleccionada gracias al método URL.createObjectURL(). Si no está bien asignada (es decir, no se selecciona ninguna imagen) asignamos la cadena de texto Sin imagen a la variable img.

  1. Y por último, modificamos esta línea:
<td>${image}</td>

por esta:

<td>${img}</td>

para realizar correctamente la sustitución.

A continuación dejo un snippet funcional (pulsa Ejecutar para ver cómo funciona):

function cargarDatos() {

  //obtener los datos que ingresó el usuario
  // let image = document.querySelector("#image").value;
  let title = document.querySelector("#title").value;
  let descripcion = document.querySelector("#descripcion").value;
  let ubicacion = document.querySelector("#ubicacion").value;
  let precio = document.querySelector("#precio").value;

  //obtener el elemento tabla
  let tabla = document.querySelector("#tabla");

  const [file] = image.files
  if (file) {
    img = `<img src="` + URL.createObjectURL(file) + `" width="150px;">`
  } else {
    img = 'Sin imagen'
  }

  //crear el contenido de la tabla
  let cuerpoTabla = `
    <tr>
        <td>${img}</td>
        <td>${title}</td>
        <td>${descripcion}</td>           
        <td>${ubicacion}</td>
        <td>${precio}</td>
        <br>
    </tr>`;

  tabla.innerHTML += cuerpoTabla;
}
<form action="">
  <label for="image"></label>
  <input type="file" id="image" accept="image/*">
  <br><br>
  <label for="title">Título</label>
  <input type="text" id="title">
  <br>
  <label for="descripcion">Descripción</label>
  <input type="text" id="descripcion">
  <br>
  <label for="ubicacion">Ubicación</label>
  <input type="text" id="ubicacion">
  <br>
  <label for="precio">Precio</label>
  <input type="text" id="precio">
</form>
<br>
<button class="btn btn-primary" id="cargar" onclick="cargarDatos()">Añadir</button>
<br>
<br>
<table>
  <tr>
    <thead>
      <th>Imagen</th>
      <th>Título</th>
      <th>Descripción</th>
      <th>Ubicación</th>
      <th>Precio</th>
    </thead>
  </tr>
  <tbody id="tabla">

  </tbody>
</table>

3
  • Listo, me anduvo..
    – Jason
    Commented el 17 mar. 2022 a las 18:02
  • Gracias @masterguru !!
    – Jason
    Commented el 17 mar. 2022 a las 18:02
  • Perfecto, me alegro :-) Si esta respuesta es válida para tu pregunta deberias marcarla como Aceptada para que la comunidad lo sepa y no quede eternamente pendiente. Mírate este enlace para aprender a aceptar respuestas, y ya de paso, al ser nuevo en este sitio, invierte dos minutos en realizar el recorrido de bienvenida y aprender su funcionamiento básico, gracias!
    – masterguru
    Commented el 17 mar. 2022 a las 18:40
1

El problema es que estas llamando al value de la imagen y eso te va a traer un fakepath y no muestra nada, entonces se me ocurre que cargues la imagen de forma oculta con un evento y luego le pases el src de la imagen en cargarDatos, quedaria de la siguiente forma:

<script type="text/javascript">
function cargarDatos(){

    //obtener los datos que ingresó el usuario
    //let image = document.querySelector("#image").value;
    let title = document.querySelector("#title").value;
    let descripcion = document.querySelector("#descripcion").value;
    let ubicacion = document.querySelector("#ubicacion").value;
    let precio = document.querySelector("#precio").value;
    let image = document.getElementById('imgOculta');

    //obtener el elemento tabla
    let tabla = document.querySelector("#tabla");

    //crear el contenido de la tabla
    let cuerpoTabla = `
    <tr>
        <td><img width="50" src='${image.src}'></td>
        <td>${title}</td>
        <td>${descripcion}</td>           
        <td>${ubicacion}</td>
        <td>${precio}</td>
        <br>
    </tr>`
    ;      

    tabla.innerHTML += cuerpoTabla;
}

function crearTabla(){
    const tabla = document.createElement("table");
    const tr = document.createElement("tr");
    const cabezal = document.createElement("thead")
    for(let i = 0; 1 < 4; i++){
        const th = document.createElement("th");
        switch (i){
            case 0:
                th.innerText = "image"
                break;
                case 1:
                th.innerText = "title"
                break;
                case 2:
                th.innerText = "descripcion"
                break;
                case 3:
                th.innerText = "ubicacion"
                break;
                case 4:
                th.innerText = "precio"
                break;
                default:
                break;
        }

        thead.appendChild(th);
    }
    tr.appendChild(thead);
    tabla.appendChild(tr);
    document.body.appendChild(tabla);
}

var cargaImgOculta = function(event) {
    var imagen = document.getElementById('imgOculta');
    imagen.src = URL.createObjectURL(event.target.files[0]);
};


crearTabla();
</script>


<form action="">
      <label for="image"></label>
      <input type="file" id="image" accept="image/*" onchange="cargaImgOculta(event)">
      <img id="imgOculta" width="0" />
      <br><br>
      <label for="title">Título</label>
      <input type="text" id="title">
      <br>
      <label for="descripcion">Descripción</label>
      <input type="text"id="descripcion">
      <br>
      <label for="ubicacion">Ubicación</label>
      <input type="text" id="ubicacion">
      <br>
      <label for="precio">Precio</label>
      <input type="text" id="precio">
  </form>
  <br>
  <button class="btn btn-primary" id="cargar" onclick="cargarDatos()">Añadir</button>
  <br>
  <br>
  <table>
      <tr>
          <thead>
              <th>Imagen</th>
              <th>Título</th>
              <th>Descripción</th>
              <th>Ubicación</th>
              <th>Precio</th>    
          </thead>
      </tr>
      <tbody id="tabla">
  
      </tbody>
  </table>

con esto ya puedes generar la tabla y te mostrar las imágenes y datos que vienen del input

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.