poner imagen de archivo como fondo con javascript

kiga · #1 (**permalink**) 17/02/2011, 09:14

hola, buenos dias, actualmente me encuentro haciendo una practica y se me ha presentado el siguiente problema, por html estoy creando un formulario con 2 text area y la entrada de un archivo y con java script estoy creando una nueva ventana y llevando lo que habia en los 2 textos a la ventana, eso ya lo logre, el problema es que el archivo que estoy entrando ya valido que es un archivo de imagen valido, pero no logro ponerlo como fondo de la nueva ventana. alguien me podria ayudar? este es el codigo que llevo

Código HTML:

<script type="text/javascript">
//<![CDATA[

function GetFileExtension(Filename) { 
	var I = Filename.lastIndexOf("."); 
	return (I > -1) ? Filename.substring(I + 1, Filename.length).toLowerCase() : ""; 
}


function validar_form ( )
{
    //Se Validan Las variables, es decir que se hallan llenado los campos

var vnombre = document.form.nombre.value;
var vbiografia = document.form.biografia.value;
var varchivo = document.form.archivo.value;

 
        if ( vnombre == "" )
        {
                alert ( "Debe ingresar su nombre" );
document.form.nombre.focus();
                return false;
                exit;
        }
 
        if ( vbiografia == "" )
        {
                alert ( "Debe ingresar su biografia" );
document.form.biografia.focus();
                return false;
                exit;
        }
		
		var imagen = "";
		 
		if (varchivo == "") 
		{ 
		alert("No haz seleccionado ninguna imagen"); 
document.form.archivo.focus();		
		return false; 
		} 
		
		if (varchivo != "") { 
		imagen = GetFileExtension(varchivo); 
			if (imagen != "jpeg" && imagen != "jpg" && imagen != "png" && imagen != "gif") 
			{ 
			alert("El archivo  no es una imagen válida"); 
			return false; 
			} 
		} 
 
  var nuevaVentana=window.open('','name');
   
   
  nuevaVentana.document.write('<html><head><title>Popup</title></head>');
  nuevaVentana.document.write("<body background="+'"'+ varchivo +'"');
  
  nuevaVentana.document.write('<img src="' + varchivo + '">');
  
  nuevaVentana.document.write('<h1>' + vnombre + '</h1>' + '<p>&nbsp;</p>' + '<h2>'+ vbiografia + '</h2>'  );
  
  nuevaVentana.document.write('<p><a href="javascript:self.close()">Cerrar</a> esta ventana.<\/p>');
  nuevaVentana.document.write('</body></html>');
  nuevaVentana.document.close();
 
}
 
//]]>
</script>
</head>
<body>
	<div align="center" id="titulo">Practica topicos</div>

	<form action="#" method="post" enctype="multipart/form-data" name="form" target=			"nuevaVentana">
		<div align="center" id="form">
		
        <p>Nombre:        </p>
        <p>
          <input type="text" name="nombre" />
        </p>
        <p>
          
        Biografia:
        </p>
        <p>
          <input type="text" name="biografia" height="50"   />
        </p>
        <p>Archivo de Imagen:        </p>
        <p>
          <input type="file" name="archivo" />
        </p>
        <p><input type="button" name="procesar" value="enviar" onclick="validar_form();" />
		<input type="reset" value="borrar" /></p>
        </div>
        </form>
</body>
</html>

maycolalvarez · #2 (**permalink**) 17/02/2011, 12:14

1- javascript no tiene acceso al IO, por lo que no puedes leer los archivos de imagen, y de nada te sirve tener un formulario preparado para upload si no hay un script del lado del servidor que lo procese y guarde la imágen, recuerda que javascript se ejecuta del lado del cliente

2- no todos los navegadores soportan las referencias directas del tipo (document.form.input.value), tendrás que utilizar las colecciones (document.forms['form_name'].elements['input_name'].value) o métodos del DOM (document.getElementById(), etc.)

kiga · #3 (**permalink**) 17/02/2011, 12:39

como se usa cualquiera de los 2?, es la primera ves que uso javascript y la verdad no tengo ni idea