Como lo hace gmail

amj · #1 (**permalink**) 31/01/2005, 00:15

Hola todos hice esta pregunta en el foro de php, y no obtuve una respuesta satisfactoria, recurro a los gurus de javascript de este sitio.
Necesito hacer un multiple upload similar al attachment de gmail. Tengo el siguiente código javascript:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Multiple upload</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="AMJ [email protected] http://www14.brinkster.com/alejomj2">
<META NAME="Keywords" CONTENT="upload multiple">
<META NAME="Description" CONTENT="formulario de upload similar al de google">
<style>
.upload {
	border: 0px none;
	width: 0px;
}
.ioculto {
	visibility: hidden;
	display: none;
}
</style>

<script language="javascript">
function filer(id) {
	var ihidden = "<input type='hidden'>";
	if (document.layers) {
		eval("document.layers."+id+".document.write(ihidden);");
		eval("document.layers."+id+".document.close();");
		eval("document.layers."+id+"k.document.write();");
		eval("document.layers."+id+"k.document.close();");
	} else if (document.all) {
		eval(id+".innerHTML = ihidden;");
		eval(id+"k.innerHTML = '';");
	}
}
function filew(ifile) {
	var data = ifile.value;
	var id = ifile.name;
	var remove = " <a href='#' style='cursor:hand' onclick=\"filer('"+id+"')\">Borrar</a>";
	id += "k";
	if (document.layers) {
		eval("document.layers."+id+".document.write(data+remove+'<br>');");
		eval("document.layers."+id+".document.close();");
	} else if (document.all)
		eval(id+".innerHTML += data+remove+'<br>';");
}
function nuevoUpload() {
  var elem = document.f.length;
  var upload = "<span id='f"+elem+"'><input type='file' name='f"+elem+"' class='ioculto' onchange='filew(this)'></span><span id='f"+elem+"k'></span><span id='file"+(1*elem+1)+"'></span>";
  if (document.layers) {
     eval("document.layers.file"+elem+".document.write(upload);");
     eval("document.layers.files.document.close();");
  } else if (document.all)
		eval("file"+elem+".innerHTML += upload;");
  eval("document.f.f"+elem+".click();");
}
</script>
</HEAD>

<BODY>
<h1>Múltiple upload</h1>
Este es un ejemplo de hacer un múltiple upload similar al de google para hacer attachments.<br>
Autor: <a href="http://www14.brinkster.com/alejomj2">AMJ [email protected]</a><br>
Fecha: 29/01/2005
<form name="f" nctype="multipart/form-data" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="100000">
<table border="1" width="100%">
<tr><td>&nbsp;<br><span id="file1"></span><br>&nbsp;</td></tr>
<tr><td><a href="#" style="cursor:hand" onclick="nuevoUpload()">Agregar Archivo</a>
</td></tr>
</table>
<a href="#" style="cursor:hand" onclick="document.f.submit()">Subir Archivos</a>
</form>

</BODY>
</HTML>

el error que me saca es de acceso denegado, que solución puede haber a parte de este otro (el problema de este es que muestra el botón "examinar"):

Código:

<style>
.upload {
	border: 0px none;
	width: 0px;
	background: white;
	cursor: hand;
	color: blue;
	text-decoration:underline;
}
.ioculto {
	visibility: hidden;
	display: none;
}
</style>

<script language="javascript">
function filer(id) {
	var ihidden = "<input type='hidden'>";
	if (document.layers) {
		eval("document.layers."+id+".document.write(ihidden);");
		eval("document.layers."+id+".document.close();");
		eval("document.layers."+id+"k.document.write();");
		eval("document.layers."+id+"k.document.close();");
	} else if (document.all) {
		eval(id+".innerHTML = ihidden;");
		eval(id+"k.innerHTML = '';");
	}
}
function filew(ifile,i) {
	ifile.className = "ioculto";
	var upload = "<span id='f"+i+"'><input type='file' name='f"+i+"' class='upload' onchange='filew(this,"+(1*i+1)+")'></span><span id='file"+(1*i+1)+"'></span>";
	var id = ifile.name;
	var data = "<span id='"+id+"k'>"+ifile.value+" <a href='#' style='cursor:hand' onclick=\"filer('"+id+"')\">Borrar</a><br></span>";
	if (document.layers) {
		document.layers.files.document.write(data);
		document.layers.files.document.close();
		eval("document.layers.file"+i+".document.write(upload);");
		eval("document.layers.files.document.close();");
	} else if (document.all) {
		files.innerHTML += data;
		eval("file"+i+".innerHTML += upload;");
	}
}
</script>
</HEAD>

<BODY>
<h1>Múltiple upload</h1>
Este es un ejemplo de hacer un múltiple upload similar al de google para hacer attachments.<br>
Autor: <a href="http://www14.brinkster.com/alejomj2">AMJ [email protected]</a><br>
Fecha: 29/01/2005
<form name="f" enctype="multipart/form-data" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="200000">
<table border="1" width="100%">
<tr><td valign="top" width="25%">Agregar Archivo <span id="file1"><span id="f1"><input type="file" class="upload" name="f1" onchange="filew(this,2)"></span></span><span id="file2"></span>
</td><td>&nbsp;<br><span id="files"></span><br>&nbsp;</td>
</tr>
</table>
<a href="#" style="cursor:hand" onclick="document.f.submit()">Subir Archivos</a>
</form>
</body>

les agradezco su ayuda y/o comentarios de como poder cambiar el estilo del botón examinar del input tipo file

Appletalk · #2 (**permalink**) 03/02/2005, 01:19

Hola, yo te ayudo. En realidad no tengo ganas de ayudarte (2.43 A.M localtime), pero en algun momento lo voy a necesitar.

Te explico una cosa sobre este foro. Los que postean la mayoria no sabe un sorete, por eso recibis mensajes como el de el tontito ese o mensajes que te desvian y si querias hacer un foro terminas haciendo un fotolog.

Lo que escribi cumple creo con XHTML 1.0 por lo tanto lo podrias agregar a tu sistema sin ningun problema. El Javascript esta diseniado para que si alguien no lo llega a tener activado pueda subir por lo menos un archivo.

Para capturar los archivos, como son multiples, los mando en forma de un array. Es decir que para acceder a cada uno de esos, vas a tener que recorrerlo con foreach() por ejemplo.

Aca va. Me muero de suenio, maniana agrego la validacion. Enjoy

Código HTML:

<html>
<head>
<style>
<!--

  fieldset, fieldset pre {
  	display: block;
    	width: 464px;
    	font-family:arial;
  	font-size:12px;
    	padding-left: 6px;
    	padding-top: 2px;
  	padding-bottom: 3px;
  	margin-top: 3px;
  }
 
  fieldset.uploadbox {
  	padding-bottom: 5px;
  }

  fieldset.sbtbox {
  	text-align:center;
  }
  
  fieldset.debugbox {
  	white-space:pre;
  	text-align:left;
  }

  div#uptext {
  	margin-bottom: 3px;
  }

  span.uptext, #add {
  	cursor: pointer;
  	cursor: hand;
  	text-decoration: underline;
  	color: blue;
  }
  
  div#upfile input {
  	width: 310px;
  }
-->
</style>

<script language="Javascript" type="text/javascript">

function init() {
	document.getElementById('upfile').style.display='none';	
	
	upt = document.getElementById('subir');
	apt = document.getElementById('add');
	if (upt.addEventListener) {
		upt.addEventListener('click', showUp, false);
		apt.addEventListener('click', addxUp, false); }
	else if(upt.attachEvent) {
		upt.attachEvent('onclick', showUp);
		apt.attachEvent('onclick', addxUp); }
	else {
		upt.onclick = showUp;
		apt.onclick = addxUp; }
}

function showUp() {
	document.getElementById('upfile').style.display='block';	
	document.getElementById('firstup').focus();
}

function addxUp() {
	newadd = document.createElement('input');
	newadd.type = 'file';
	newadd.name = 'files[]';
	newadd.style.marginRight = '4px';
	
	document.getElementById('upfile').insertBefore(newadd, document.getElementById('add') );
	newadd.focus();	
}

window.onload = init;
</script>

</head>

<body>


<form action="<?=$PHP_SELF?>" method="post" enctype="multipart/form-data">

<fieldset class='debugbox' >
	<legend>Debug:</legend>
	<? echo '<pre>'; print_r($_FILES); echo '</pre>';?>
</fieldset>
  
<fieldset class='uploadbox'>
	<legend>Attachments</legend>
	<div id="uptext">
		<span class="uptext" id='subir'>Subir un archivo</span>
	</div>
	<div id='upfile'>
		<input id='firstup' type="file" name="files[]" />
		<span id="add">Agregar otro archivo</span>
	</div>
</fieldset>

<fieldset class='sbtbox' >
	<input type="submit" name="filesbt" value="Enviar" />
</fieldset>
</form>
</body>
</html>

Appletalk · #3 (**permalink**) 03/02/2005, 23:43

Ah y con respecto al estilo:

http://www.quirksmode.org/dom/inputfile.html

amj · #4 (**permalink**) 04/02/2005, 00:39

Gracias Appletalk, tu solución parece ser una buena alternativa, pero... me saca error en Línea 76 carácter 2 (EL objeto no acepta esta propiedad o método)

Código:

document.getElementById('upfile').insertBefore(new  add, document.getElementById('add'));

. En cuanto al estilo del input file, vi tu link recomendado pero veo que hay problemas en cambiar el texto "Examinar...", y aún sigo con la incertidumbre de como lo hace gmail, pues el método es igual al primer código que postee, pero a ellos no les saca error de acceso denegado a la hora de enviar el email, a mi si (rayos).
Gracias.
ya corregido el error new add ===> newadd

Appletalk · #5 (**permalink**) 04/02/2005, 17:07

Si, por algun extrano motivo agrega tabulaciones al postear.

Te comento que eso de acceso denegado me parece muy extranio, a mi no me sucede. Debe ser una cuestion de tu maquina.
Saludos

amj · #6 (**permalink**) 06/02/2005, 22:24

No entiendo, Appletalk, a ti te funciona el código? el acceso denegado a la hora de enviar el formulario no te sale?. miraré en otra máquina a ver que pasa

Appletalk · #7 (**permalink**) 06/02/2005, 23:01

Obviamente que no.

Debes tener un problema en la configuracion server side

Appletalk · #8 (**permalink**) 06/02/2005, 23:33

Por cierto, queria comentarte que estoy haciendo una libreria con muchas de las cosas de gmail para implementarlas facilmente.

Acabo de terminar el indicador de gmail de quien es el autor del mensaje siguiente (un cuadrito abajo lo indica con una flechita).