Limpiando un campo file

Comprobar que un fichero tenga una extensión determinada no es muy difícil con javascript, pero cuando lo tenemos seleccionado y no es correcto, podemos cometer el error de pulsar sobre el botón de envío.

Debido a ello vamos a proponer un script que permita previsualizar la imagen que seleccionemos, y en el caso de que el fichero seleccionado no tenga la extensión de imagen que nos interese, limpiar el campo file.

La estructura será así:

function checkear_extension(fichero)	{
	// definimos antes los métodos prever() y limpiar()
	(/.(gif|jpg|png)$/i.test(fichero.value)) ? prever() : limpiar();
}

La función limpiar():

function limpiar()	{
	f = document.getElementById("archivo");
	nuevoFile = document.createElement("input");
	nuevoFile.id = f.id;
	nuevoFile.type = "file";
	nuevoFile.name = "archivo";
	nuevoFile.value = "";
	nuevoFile.onchange = f.onchange;
	nodoPadre = f.parentNode;
	nodoSiguiente = f.nextSibling;
	nodoPadre.removeChild(f);
	(nodoSiguiente == null) ? nodoPadre.appendChild(nuevoFile):
		nodoPadre.insertBefore(nuevoFile, nodoSiguiente);
}

Como puede verse la forma de limpiar un campo file es algo rebuscada, pero después de hacer muchas pruebas, es la única manera funcional en los tres navegadores probados. De todos modos, simplemente se podría comprobar la extensión durante la validación del formulario:

-onsubmit=''return/.(gif|jpg|png)$/i.test(archivo.value)"

La visualización

Mostrar una imagen seleccionada desde un campo file podría parecernos cosa fácil, pero por razones de seguridad no se pueden mostrar las imágenes a no ser que estén en la red (tal vez puedan encontrarse truquillos que funcionen en algún navegador, pero no sirven en todos).

Solo queda mostrar el método prever que definiremos dentro del método checkear_extension(), que definitivamente se quedaría de la siguiente manera:

function checkear_extension(fichero)	{

	function prever() {
		var campos = new Array("maxpeso", "maxalto", "maxancho");
		for (i = 0, total = campos.length; i < total; i ++)
			fichero.form[campos[i]].disabled = false;
		actionActual = fichero.form.action;
		targetActual = fichero.form.target;
		fichero.form.action = "previsor.php";
		fichero.form.target = "ver";
		fichero.form.submit();
		for (i = 0, total = campos.length; i < total; i ++)
			fichero.form[campos[i]].disabled = true;
		fichero.form.action = actionActual;
		fichero.form.target = targetActual;
	}

	function no_prever() {
		alert("El fichero seleccionado no es válido...");
		limpiar();
	}

	(/.(gif|jpg|png)$/i.test(fichero.value)) ? prever() : no_prever();
}

Como comentarios adicionales, solo quedaría matizar que la visualización no es otra cosa que el envío del formulario con la habilitación de los campos que servirán de control, hacia una ventana, que en este caso concreto es un iframe del mismo documento.

El resto de javascript

Lo que quedaría por definir es un sistema validador para evitar el envío del formulario en el caso de no haber seleccionado una imagen válida, y un método que reciba los valores sobre la imagen que se seleccione.

Para la primera definición supondremos que la etiqueta form tiene algo de esto: <form onsubmit="return validar(this)">

function validar(f)	{
	enviar = /.(gif|jpg|png)$/i.test(f.archivo.value);
	if (!enviar)	alert("seleccione imagen");
	return enviar;
}

Y los datos de la previsualización los recibirá un método que llamaremos datosImagen(), cuyos argumentos serán, el peso, anchura, altura y nº de error (si el error es “0″ significa sin error).

function datosImagen(peso, ancho, alto, error)	{
	function mostrar_error()	{
		enviar = false;
		mensaje = "Ha habido un error (error nº " + error + "):";
		if (error % 2 == 1) // tipo incorrecto
			mensaje += "nel fichero no es válido";
		error = parseInt(error / 2);
		if (error % 2 == 1) // excede en peso
			mensaje += "nla imagen pesa mogollón (" + peso + ").";
		error = parseInt(error / 2);
		if (error % 2 == 1) // excede en anchura
			mensaje += "nla imagen excede en anchura (" + ancho + ").";
		error = parseInt(error / 2);
		if (error % 2 == 1) // excede en altura
			mensaje += "nla imagen excede en altura (" + alto + ").";
		error = parseInt(error / 2);
		alert (mensaje);
		with (document.forms)	{
			formu.peso.value = 0;
			formu.ancho.value = 0;
			formu.alto.value = 0;
		}
		limpiar();
	}

	if (error == 0)	with (document.forms)	{
		formu.peso.value = peso;
		formu.ancho.value = ancho;
		formu.alto.value = alto;
	}
	else	mostrar_error();
}

Sobre la forma de codificar los errores no voy a hacer comentarios para que este artículo no se haga demasiado extenso.

Gestión desde el servidor

La página destino del formulario durante este sistema de previsualización, debe ser una página web, con una imagen (que en este caso será el fondo de la página), y el contenido de esa imagen será el recibido por la imagen del formulario.

<?php
	session_start();
	$defecto = "webmaster.gif";
	$Ok = isset($_FILES["archivo"]);
	$url = ($Ok) ? $_FILES["archivo"]["tmp_name"] : $defecto;
	list($anchura, $altura, $tipoImagen, $atributos) = getimagesize($url);
	$error = (isset($atributos)) ? 0 : 1;
	$los_tipos = array("gif", "jpg", "png");
	$tipo = ($Ok) ? "image/".$los_tipos[$tipoImagen - 1] : "image/gif";
	$fichero = ($Ok && ($error == 0)) ? $_FILES["archivo"]["name"] : $defecto;
	$tam = filesize($url);
	$OkTam = isset($_POST["maxpeso"]);
	$OkAncho = isset($_POST["maxancho"]);
	$OkAlto = isset($_POST["maxalto"]);
	$maxTam = ($OkTam) ? (int) $_POST["maxpeso"]: 100000;
	$maxAncho = ($OkAncho) ? (int) $_POST["maxancho"]: 640;
	$maxAlto = ($OkAlto) ? (int) $_POST["maxalto"]: 480;
	$error += ($tam <= $maxTam) ? 0 : 2;
	$ancho = ($error == 1) ? 0 : $anchura;
	$alto = ($error == 1) ? 0 : $altura;
	$error += ($ancho <= $maxAncho) ? 0 : 4;
	$error += ($alto <= $maxAlto) ? 0 : 8;
	$datos = ($error == 0) ? $url : $defecto;
	$onload = ($Ok) ? "onload='parent.datosImagen($tam, $ancho, $alto, $error)'": '';
	$datos_imagen = fread(fopen($datos, "rb"), filesize($datos));
	$_SESSION["cont"] = $datos_imagen;
	$_SESSION["tipo"] = ($error == 0) ? $tipo : "image/gif";
?>
<html>
<head>
<style type="text/css" >
html	{
	margin: 0;
	height: 100%;
}
body	{
	height: 100%;
	background-image: url(previendo.php?dato=<?=$fichero;?>);
	background-repeat: no-repeat;
	background-position: center center;
}
</style>
</head>
<body <?=$onload;?>>

</body>
</html>

Resumiendo el código expuesto, diremos que se crea una sesión php y se guarda el código de la imagen y su tipo; además se pone como fondo de la página un fichero (previendo.php) que a pesar de tener parámetro, en la página no se consideran, la razón de esta “curiosidad” es evitar que la imagen sea mostrada por los navegadores desde la memoria caché.

Otra curiosidad es la definición en la etiqueta body (sus estilos se ven en la sección style de la cabecera del documento) del evento load (onload), donde se envían datos a la ventana “parent”, con información de la imagen y un código de error, que de ser distinto de 0 en la página “padre” mostrará una alerta con la descripción del mismo.

Para finalizar mostraremos el contenido del fichero previendo.php, que como se puede adivinar, tan solo envía el contenido de la imagen a la consola:

<?php
session_start();
$url = ($_SESSION["cont"] == "")
	? fread(fopen("webmaster.gif", "rb"), filesize("webmaster.gif"))
	: $_SESSION["cont"];
$tip = ($_SESSION["tipo"] == "")
	? "image/gif"
	: $_SESSION["tipo"];
header("Content-type: $tip");
echo $url;
session_destroy();
?>

Solo nos queda mostrar este código en funcionamiento; para ello podemos visualizar el formulario ejemplo.

Estructura de árbol

En la jerga informática se suele usar mucho el término “estructura de árbol”,  que significa una dependencia de unas cosas con otras,  en donde el objeto más importante es la raíz; y en una página web, la raíz es la propia ventana (el objeto window).

De dicho objeto window, se desprenden unas cuantas ramas que a la vez, en algunos casos, son objetos y en otros no, estos últimos se podrían considerar simples “hojas”, pero en lenguaje informático creo que es mejor decir que se trata de atributos o propiedades

El código que a continuación se presenta, permite destripar el objeto window:

function destriparWindow()	{
	var tripas = "destripando el objeto <u>window</u>";
	dato = window;
	for(esto in dato)  tripas += "<br />" + esto + " = " + dato[esto];
	return tripas;
}

Si se quisiera mostrar las tripas de window en una capa podríamos crear esa capa vacía y con un identificador. Ejemplo: <div id=”despiece_de_window” >, y el botón para activar el script podría estar definido así:

<button
 onclick="with
(document.getElementById('despiece_de_window')) innerHTML = destriparWindow()" >
Destripar el objeto window
</button >

El siguiente espacio contiene el script y las definiciones de la capa y el botón para que pueda ver los resultados:

Destripar el objeto window

Destripar el objeto window

Según  el resultado obtenido en el recuadro informativo, después de activar el script, podemos ver que dependen del objeto window una buena cantidad de objetos (o tal vez sea mejor decir sub-objetos). Entre ellos podemos encontrar document, location, el propio objeto window, self, etc. que nos permite deducir el próximo paso: qué tal si modificamos nuestro destripador del objeto window, permitiendo un parámetro: un objeto para destripar.

Bueno, como yo ya lo hice, lo propongo como ejercicio, por ejemplo: en vez de llamarse: “destriparWindow()” podría ser “destriparObjeto()” o simplemente “destripar()”. El parámetro será el objeto a destripar, así que la resolución del ejercicio pasaría por cambiar las coincidencias del objeto window en el script por lo que se pasa como parámetro. En foros del web pueden hacer las preguntas que quieran para esta tarea.

Otros objetos para destripar

La lista de objetos para destripar puede ser inmensa, incluso se pueden destripar nuevos objetos creados dinámicamente.

Objetos interesantes para destripar:

• document
• document.frames
• location
• document.body
• document.body.childNodes
• document.getElementById(’despiece_de_window’).parentNode

Conclusiones

Antes de terminar, me gustaría prevenir a aquellos osados lectores que se les haya pasado por la cabeza hacer un destripador recursivo, que en el momento que encuentre un objeto “destripable” lo destripe sin más. No sé si habrán notado que el objeto window tiene como rama desprendiéndose de sí otro objeto window. Y es que una de las características de esta estructura de árbol es que contiene nodos que hacen referencia a sí mismos, de esta forma un sistema recursivo generaría un “bucle infinito”, cosa que todo programador sabe que debe evitarse.

Un buen ejemplo a manera de conclusión es: un destripador que hice con anterioridad y que sirvió de semilla para escribir este artículo: Destripador web.

¿RGB?

Y si queremos los colores para alguna aplicación informática, tenemos que
concentrarnos en el concepto RGB que proviene de las iniciales de los tres colores básicos que se
necesitan: rojo, verde y azul (en inglés: Red Green Blue)

Ahora los colores dejan de serlo para convertirse en unos números que se corresponden con la cantidad o
porcentaje de cada componente. En resúmen, contestando más técnicamente la pregunta inicial, el negro
es ausencia de los tres componentes (rojo, verde y azul)… el blanco es la máxima cantidad de ellos…
y el gris es la mitad de cada uno.

Para mostrar colores en las páginas web hay que usar su descripción en inglés, siempre que
esté definido; por ejemplo existe el negro (black), el blanco (white), el gris (gray)…, pero para
otras tonalidades podría no existir una descripción, así que tenemos que pensar en un sistema
que indique la cantidad de cada componente del color que queremos.

Uno de esos sistemas es una especie de función “rgb()” que recibe 3 parámetros que pueden ser números entre
0 y 255, donde el blanco sería rgb(255,255,255); también pueden usarse porcentajes: rgb(100%,100%,100%).
Otra forma de representación consiste en una cadena de texto empezada por el carácter almohadilla (#)
seguido de los valores hexadecimales de cada componente: #FFFFFF.

Hexadecimal: conceptos básicos

En el sistema hexadecimal cada dígito puede valer entre 0 y 15 (0..F), y para los colores necesitamos
un rango entre 0 y 255 (00..FF). Seguidamente mostraremos la forma de convertir valores numéricos
decimales/hexadecimales ayudándonos del lenguaje javascript.

// conversión de un número entre 0 y 255 a su valor hexadecimal.
// Por ejemplo valorHex(255) = "FF"
function valorHex(n)    {
    return "0123456789ABCDEF".charAt(parseInt(n / 16))
	+ "0123456789ABCDEF".charAt(parseInt(n % 16));
} 

// conversión de un número hexadecimal "00" y "FF"
// a su valor numérico decimal (entero positivo: 0..255).
// Por ejemplo valorDecimal("FF") = 255
function valorDecimal(s) {
  return ("0123456789ABCDEF".indexOf(s.charAt(0)) * 16)
	+ "0123456789ABCDEF".indexOf(s.charAt(1));
}

Con la ayuda de estos conversores que acabamos de definir podemos manipular mejor los colores de
nuestra página. Propongo a continuación la declaración de un objeto “Color”, donde la definición
se realiza introduciendo como parámetro sus tres componentes en forma numérica, o si se prefiere
como una cadena de texto.

// Objeto Color: a partir de sus 3 componentes
// Entero positivo: 0..255
function Color(Rojo, Verde, Azul)	{
	this.Rojo = Rojo;
	this.Verde = Verde;
	this.Azul = Azul;
	this.toString = function()	{
		return "#" + valorHex(this.Rojo) + valorHex(this.Verde) + valorHex(this.Azul);
	}
	this.toArray = function()	{
		return new Array(this.Rojo, this.Verde, this.Azul);
	}
	this.fromString = function(s)	{
		return new Color(valorDecimal(s.substr(1, 2)),
			valorDecimal(s.substr(3, 2)),
			valorDecimal(s.substr(5, 2)));
	}
}

Notese la definición de los métodos toString(), toArray() y fromString(s)… en realidad “toString()” es una
re-definicaión ya que los objetos javascript implementan de forma inherente este método cuya
finalidad es representarlos; toArray() devuele los componentes como un array. También puede formarse
una cadena de este tipo:

"rgb(" + negro.toArray() + ")"

… fromString() es un método que permite la construcción del color a partir de otro color representado
por una cadena. He creído conveniente usar una representación que nos permita su uso directo.

O sea que con este código son válidas las siguientes definiciones:

var negro = new Color(0, 0, 0);
var blanco = new Color().fromString("#FFFFFF");
// Para obtener el color como una cadena
// bastaría con poner el nombre de la variable:
alert(negro);
// Y si quisieramos obtener el color como un array de
// sus tres componentes habría que añadirle la coletilla
// toArray() al nombre de la variable:
alert(negro.toArray());
// Por último podemos obtener el valor de cada componente
// consultando el atributo correspondiente
alert(negro.Rojo);

Los valores intermedios

Teniendo las declaraciones necesarias para manipular colores nos centraremos en la obtención
de los valores intermedios. Para ello debemos obtener un número que he denominado ratio,
que sumándolo a cada componente nos permite obtener el siguiente.
De más está decir que esos valores también pueden ser negativos.

function coloresIntermedios(inicial, final, pasos)	{
	var resultado = new Array(pasos--);
	resultado[0] = inicial;
	resultado[pasos] = final;
	ratio = new Color(parseInt((final.Rojo - inicial.Rojo) / pasos),
		parseInt((final.Verde - inicial.Verde) / pasos),
		parseInt((final.Azul - inicial.Azul) / pasos));
	for (var i = 1; i < pasos; i ++)
		resultado[i] = new Color(inicial.Rojo + (ratio.Rojo * i),
			inicial.Verde + (ratio.Verde * i),
			inicial.Azul + (ratio.Azul * i));
	return resultado;
}

Una sencilla aplicación

Si quisieramos obtener esos datos intermedios introduciendo por teclado los colores
inicial y final, además del número de valores intermedios, nos bastaría un pequeño formulario
con 3 elementos para la entrada de datos, un botón para poner en funcionamiento nuestro script,
y un elemento que muestre esos datos.

<form name="intermedios" action="" method="get" >
color inicial:<input type="text" name="ini" value="#000000" />
color final:<input type="text" name="fin" value="#FFFFFF" />
pasos:<input type="text" name="pasos" value="5" />
<textarea name="resultado" style="width: 70%; height: 150px;"></textarea>
<br/>

<button
	onclick="resultado.value = coloresIntermedios(new Color().fromString(ini.value),
		new Color().fromString(fin.value), pasos.value)" >
obtener intermedios
</button>
</form>

Algunos usos

Se me ocurren dos posibles usos para este sistema: fondos degradados en botones, capas y páginas;
y efecto fade en textos. Se puede apreciar estas dos funcionalidades en la siguiente página:

Gradientes (php + librerías GD)

Otros enlaces relacionados

Para quien desee más información:

• Gradientes (php + librerías GD) -mencionado anteriormente-
• gradientes (FAQs javascript en Foros del web)
• Fondo degradado (FAQs javascript en Foros del web)
• Fade v1.1
• FadeOut en un talbla

Incluso se afirma que son formas semánticamente correctas, no voy a juzgar si está bien o mal empleado el uso de esas palabras, tan solo voy a incluír un enlace a un artículo de wikipedia, sobre “Semántica”.

En principio podría decir simplemente que la forma correcta es la que se puede ver en un mensaje de los foros del web que yo mismo escribí:. Abrir enlace en un popup (me refiero a la primera de esas formas), pero he notado que siguen existiendo dudas, tal como se puede deducir de este otro mensaje: Hay que rectificar las FAQS

Existen varias páginas en donde se explica esa forma de enlazar:

• http://www.nosolousabilidad.com/articulos/popups_javascript.htm
• http://www.sitepoint.com/article/perfect-pop-up
• http://www.accesibilidad.info/2005/02/28/popup_de_javascript_accesible/
• http://www.alistapart.com/articles/popuplinks/
• http://www.jlvelazquez.net/accesibilidad/popups.asp

Y… ¿Por qué afirmo que no es correcto?

Para iniciar daré una explicación sencilla basada justamente en la semántica. Si usamos un enlace o vínculo a otra página, es evidente que pensamos que ese vínculo se puede realizar, pero el usar la sentencia return false (asociado al evento click de ese enlace) estamos dando la orden de cancelar el enlace o vínculo. En resumen, usando un enlace queremos expresar “enlace a”, y usando return false estamos expresando “no enlace”.

Podríamos pensar entonces que no debería existir ese tipo de cancelación, pero la verdadera razón de existencia es para confirmación o validación, tal como explicaré más adelante.

Describiré ahora la forma correcta, ayudándome de la similitud entre enlaces y formularios. La verdad es que son muy pocas las veces que se plantea el envío de un formulario hacia un popup, pero es posible, y está registrado en las FAQs javascript del mismo foro: Submit a una ventana emergente (popup), que también escribí. Además he encontrado un mensaje precedente: Un consejo, una idea, por favor.

Forma correcta

El enlace a un popup se debe hacer como cualquier enlace, usando el atributo href…, y para enviar formularios se utiliza el atributo action (en el primer caso se usa la etiqueta “a” y en el segundo “form”).

Para que el soporte destino (tanto de los enlaces como de los formularios) sea otra ventana, debe definirse el atributo target. Existen nombres estándar de algunas ventanas como _self, _blank, _top, _parent. Pero también se puede dar un nombre arbitrario, y esos es lo que debemos hacer.

Y ahora viene lo más importante… “el popup”…

Tanto formularios como enlaces, ofrecen un sistema para confirmar/cancelar la ejecución y que son muy parecidos. Usando un valor lógico con el evento asociado: submit para formularios y click para enlaces, de manera que se puede confirmar la acción asignando el valor lógico true, y cancelarla con false.

Dicho esto, voy a mostrar 2 formas correctas de formulario y enlace (aún sin usar ventanas):

Enlace:
<a
	href="destino.html"
	onclick="return confirm('Desea enlazar con:\n' + this.href)">
	...
</a>
Formulario:
<form
	action="destino.html"
	onsubmit="return confirm('Desea enviar formulario a:\n' + this.action)">
	...
</form>

Nótese la similitud de los dos ejemplos… y si a ambos le añadimos un atributo target arbitrario: target=”popup”, seguirá teniendo la misma similitud: un enlace que se confirma (también podría validarse) con una función asociada al manejador de evento onclick, y un formulario que igualmente se confirma con su evento asociado (submit).

La verdad es que la confirmación la podemos omitir y en su lugar, ¿qué pasaría si abriésemos una ventana
en blanco, de nombre popup…? Recuérdese que hemos puesto un atributo target=”popup”…

Enlace:
<a
	href="destino.html"
	target="popup"
	onclick="window.open('', 'popup', 'width = 200, height = 100')">
	...
</a>

Formulario:
<form
	action="destino.html"
	target="popup"
	onsubmit="window.open('', 'popup', 'width = 200, height = 100')">
	...
</form>

Cuando se activa el enlace (click), antes de enlazar se chequea el evento asociado por si hubiese que validar/confirmar, pero en vez de eso está la orden de abrir la ventana popup… sin URL. Entonces se abre esa ventana y luego se enlaza, pero al tener definido el atributo target, ese enlace se hace a una ventana que debe llamarse popup, y como es parte del juego de ventanas activas, allí se realiza. Con el formulario el razonamiento es el mismo.

Una última observación

Otra cosa que no hemos considerado es el bloqueo de ventanas emergentes desde la configuración de los navegadores. Si bien en estos casos algunos navegadores abren una ventana nueva, la verdad es que no debería ser así…

Con los siguientes códigos para enlazar:

<a
	href="index.php"
	target="v"
	onclick="window.open('', 'v', 'width=300,height=200');" >
	...
</a>

<a
	href="index.php"
	target="v"
	onclick="window.open(this.href, this.target, 'width=300,height=200'); return false" >
	...
</a>

probados en los navegadores: “explorer”, “mozilla” y “opera”, se han abierto correctamente las ventanas en los dos primeros, pero en el tercero la ventana fue bloqueada con ambos códigos, pero solo a enlazado en la ventana activa el código sin cancelación (primero). Supongo que este último comportamiento es el correcto cuando se bloquean los popups (lamento no disponer de todos los navegadores para hacer pruebas).

Y teniendo javascript desactivado (otra de las posibilidades que ofrecen los navegadores), ambos códigos
también funcionan correctamente.