Ver Mensaje Individual
  #8 (permalink)  
Antiguo 17/12/2010, 15:15
esaenz22
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 16 años, 6 meses
Puntos: 7
Respuesta: problema al mostrar imagen en DOM.

gracias por la respuesta. mejor le explico con detalles de que se trata la aplicacion que estoy desarollando.

tengo mi formulario de upload. hay un enlace para agregar mas input files. habia mencionado que cuando reemplazo el texto por una imagen (osea colocar dento del vinculo una imagen) me da error por que la propiedad del innerHTML solo acepta cadenas.

refrequé la pagina y cuando quise agregar mas imagenes, no me genero ningun input file.

para no confundirlo, el ejemplo del upload multiple me guie de un aporte de cristalab.

Subir multiples archivos con php

y este es el codigo que he modificado.

Código Javascript:
Ver original
  1. var numero = 0; //Esta es una variable de control para mantener nombres
  2.             //diferentes de cada campo creado dinamicamente.
  3. evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
  4.    return (!evt) ? event : evt;
  5. }
  6.  
  7. //Aqui se hace lamagia... jejeje, esta funcion crea dinamicamente los nuevos campos file
  8. addCampo = function () {
  9. //Creamos un nuevo div para que contenga el nuevo campo
  10.    nDiv = document.createElement('div');
  11. //con esto se establece la clase de la div
  12.    nDiv.className = 'imagenes';
  13. //este es el id de la div, aqui la utilidad de la variable numero
  14. //nos permite darle un id unico
  15.    nDiv.id = 'file' + (++numero);
  16. //creamos el input para el formulario:
  17.    nCampo = document.createElement('input');
  18. //le damos un nombre, es importante que lo nombren como vector, pues todos los campos
  19. //compartiran el nombre en un arreglo, asi es mas facil procesar posteriormente con php
  20.    nCampo.name = 'imagenes[]';
  21.    nCampo.className = 'formularios';
  22. //Establecemos el tipo de campo
  23.    nCampo.type = 'file';
  24.    
  25.  
  26.     window.onload = function(){
  27.     var img = document.createElement("img");
  28.     img.src = "../img/icons/book_16.png";
  29.    
  30.     a = document.createElement('a');
  31.     //El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
  32.     a.name = nDiv.id;
  33.     //Este link no debe ir a ningun lado
  34.     a.href = 'javascript:void(0);';
  35.     //Establecemos que dispare esta funcion en click
  36.     //a.onclick = elimCamp;
  37.     a.className = 'enlaces';
  38.    
  39.     a.addEventListener("click",function(){
  40.     // Eliminar nodo
  41.     },false);
  42.    
  43.     a.appendChild(img);
  44.    
  45.     //Bien es el momento de integrar lo que hemos creado al documento,
  46.     //primero usamos la función appendChild para adicionar el campo file nuevo
  47.     nDiv.appendChild(nCampo);
  48.     //Adicionamos el Link
  49.     nDiv.appendChild(a);
  50.     //Ahora si recuerdan, en el html hay una div cuyo id es 'adjuntos', bien
  51.     //con esta función obtenemos una referencia a ella para usar de nuevo appendChild
  52.     //y adicionar el div que hemos creado, la cual contiene el campo file con su link de eliminación:
  53.     container = document.getElementById('adjuntos');
  54.     container.appendChild(nDiv);   
  55.    
  56.     }
  57.    
  58. }
  59. //con esta función eliminamos el campo cuyo link de eliminación sea presionado
  60. elimCamp = function (evt){
  61.    evt = evento(evt);
  62.    nCampo = rObj(evt);
  63.    div = document.getElementById(nCampo.name);
  64.    div.parentNode.removeChild(div);
  65. }
  66. //con esta función recuperamos una instancia del objeto que disparo el evento
  67. rObj = function (evt) {
  68.    return evt.srcElement ?  evt.srcElement : evt.target;
  69. }

saludos.