Carga de Archivos Usando Flash, PHP y un poco de Javascript.
actionScript, Tutoriales, PHP & Flash | Enero 12th, 2005Versión para imprimir
Ahora nos toca trabajar en el marco “control”, donde necesitamos tener un formulario conteniendo un campo de archivo:
<form name="upload" enctype="multipart/form-data" method="post" action="upload.php"> <input type="file" name="file" ></input> </form>
Además del script PHP que se encargará de subir el archivo al servidor, algo muy sencillo como:
<?
if ($_FILES['file']['size'] > 1)
{
move_uploaded_file($_FILES['file']['tmp_name'], $_FILES['file']['name']) or die;
$status = "uploaded";
}
?>
Adicionalmente, una función Javascript que le comunique a Flash el nombre del archivo para poder mostrarlo en el campo de texto del formulario. En este caso, hemos generalizado la función para poner cualquier variable en la lÃnea de tiempo principal del formulario:
<script language="javascript">
function setFlashVars(variable, value)
{
var obj=parent.principal.flashEmbed;
if (obj) eval('obj.SetVariable("' + variable + '", "' + value + '")');
}
</script>
Para cerrar el cÃrculo, solo nos faltarÃa añadir el código ActionScript necesario para “escuchar” por esta variables en el formulario Flash.
Si revisan el archivo “upload.php” completo, notarán que además de lo que ya les he mostrado, he añadido algunas lÃneas que se encargarán de enviarle a Flash otra variable cuando el archivo haya sido totalmente cargado y, en consecuencia, el marco se refresque. Nótese que debido a un bug en Internet Explorer, cuando los archivos cargados usando esta técnica son muy grandes, la barra de progreso ubicada en el borde inferior del navegador puede aparecer indefinidamente indicando progreso.
Dicho esto, tenemos que añadir el siguiente código a la lÃnea de tiempo principal del formulario:
if ($filename != undefined)
{
// Asignar variable al campo de texto
file_txt.text = unescape($filename);
// Habilitar botón "upload"
upload_btn.enabled = true;
}
else
{
// Limpiar campo de texto
file_txt.text = "";
// Deshabilitar botón "upload"
upload_btn.enabled = false;
}
if ($status == "uploaded")
{
// Archivo cargado, liberar variable
delete $filename;
}
Hasta este punto y si todo salió bien, deberÃamos tener el ejemplo trabajando correctamente, como aquÃ. Como algunos pueden estar imaginando ya, hay varias maneras en que este ejemplo puede ser extendido y/o modificado para cumplir tareas mas especÃficas , pero esto ya serÃa materia de otro artÃculo.
Espero que este tutorial les sea de utilidad. Como siempre, las preguntas referentes a tutoriales deben ser hechas en el foro.
Pages: 1 2
Enero 12th, 2005 at 9:57 am
Verdaderamente un tutorial con una utilidad bastante importante
Yo tengo un sistema muy parecido a este, la cuestion es que el evento .click() no funciona en Firefox y es algo que casi tengo resuelto. Si definitivamente encuentro la solución para su funcionamiento en Firefox dejaré por aquà un comentario.
Saludos
Enero 12th, 2005 at 10:17 am
Buen trabajo, Oscar!!, sólo una nota, hay que incluir en la etiqueta <embed> el parámetro name para que funcione en NetScape y similares
<embed name="flashEmbed” scr="formulario.swf” ………">
Enero 12th, 2005 at 5:13 pm
excelente tutorial, sólo que no se ve en firefox, alguien sabe porqué?
saludos
Enero 12th, 2005 at 5:57 pm
Fael, no se ve en firefox ¿el tutorial o los archivos?
Enero 12th, 2005 at 7:20 pm
Lo que parece tener problemas con Firefox es la demostración del formulario (en mi web), no el tutorial.
De hecho, olvidé mencionar en el artÃculo que la técnica solamente trabaja en Internet Explorer por ahora, debido a ciertas caracterÃsticas que sólo trabajan este navegador. Sin embargo, me llama la atención que ni los marcos se muestren en Firefox! Revisaré los archivos…
Gracias por reportar el asunto.
Enero 13th, 2005 at 5:13 pm
disculpen por la confusión, me referÃa a los ejemplos.
Oscar, sÃ, lo raro es que no se ve ná de ná.
ya me habÃa dado cuenta que no funciona en firefox al usar gmail, cuando uno adjunta un archivo en ie inmediatamente sale el diálogo; en firefox hay que presionar el botón para adjuntarlo
muy raro…
saludos
Enero 13th, 2005 at 5:55 pm
Bueno, al parecer el problema tenÃa que ver con la codificación del documento. Ahora ya debe verse el formulario en Firefox, pero no va a funcionar como en Internet Explorer.
Voy a investigar, a ver si encontramos una solución para que la técnica funcione también en Firefox. Si lo consigo, les dejaré saber.
Saludos.
Febrero 7th, 2005 at 4:55 pm
saludos a todos
Abril 28th, 2006 at 10:49 pm
Yo he programado la función browse atendiendo al navegador…pero el clic final no me funciona. Dejo el código por si alguien quiere aportar y dejamos listo esto ya…
function browse()
{
var navegador = navigator.appName
if (navegador == “Microsoft Internet Explorer")
{
parent.control.document.forms.upload.archivo.click();
while(parent.control.document.forms.upload.archivo == “")
{
setTimeout(100);
}
parent.control.setFlashVars(’$filename’,escape(parent.control.document.forms.upload.file.value));
}
else
{
alert("firefox");
window.parent.frames["control"].prueba(); //esta función está en el frame de upload para ver que lo llama…un simple alert
window.parent.frames["control"].document.forms.upload.archivo.click();
while(window.parent.frames["control"].document.forms["upload"].archivo == “")
{
setTimeout(100);
}
}
}