O Desenvolvedor é um blog de www.andafter.org
Chris Benseler
Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos
Status
Karma: 16024
Opiniões: 30
Mais deste autor
Usando a Prototype - passo 4 - upload de arquivo sem post na tela
Este texto foi classificado como Muito bomPor Chris Benseler
6 de Outubro de 2008
Quarto post sobre o uso da prototype: como fazer upload de um arquivo, via formulário, sem dar post na página
Acompanhe O Desenvolvedor por Feeds!
Segue abaixo um exemplo de como fazer upload de um arquivo, através de um formulário, sem precisar dar post na página.
Como funciona?
Um form normal de upload de arquivo que tem no onsubmit chamada a função javascript. Essa, por sua vez, cria um iframe em tempo de execução, muda o target do form para esse iframe e faz o upload do form.
O arquivo de destino (nesse caso usei um .php, mas independe de qual linguagem para gerenciar esse upload você quer usar) tem no onload uma chamada à função javascript do parent dele que faz informar na tela que o upload foi efetuado. Trocandando em miúdos, o upload é feito da mesma forma que sempre foi feito, e quando a página é carregada no iframe - é o momento em que o upload do arquivo foi feito e a página processada -, por javascript se faz atualizar a página pai.
Segue abaixo o código das duas páginas, comentado (usei a biblioteca Prototype para ajudar no javascript):
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo de upload</title>
<script src="http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
function upload() {
//cria um iframe, escondido
var iframe = new Element("iframe", {name:"target", id:"iframe_upload"});
//insere na página o iframe
document.body.insert(iframe);
//muda o target do form, apontando para o iframe
$("form_upload").target = iframe.name;
//mostra a mensagem
$("message").update("aguarde, enviando arquivo...");
}
function closeIframe() {
//atualiza a mensagem
$("message").update("arquivo enviado com sucesso");
//apaga o iframe
$("iframe_upload").remove();
}
</script>
<style type="text/css">
iframe {display:none;}
</style>
</head>
<body>
<h1>Exemplo de upload</h1>
<form action="upload.php" method="post" enctype="multipart/form-data" id="form_upload" onsubmit="return upload();">
<input type="file" name="arquivo" id="arquivo" />
<input type="submit" value="enviar" />
<span id="message"></span>
</form>
</body>
</html>
upload.php
<?php //faz todo o processamento necessário no PHP para persistir o arquivo ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Upload - OK</title> </head> <!-- chama função javascript da página pai --> <body onload="parent.closeIframe();"> </body> </html>
Basicamente, isso é o que a maioria dos sites que têm formulários de upload estão fazendo; é o que chamam, por aí, de upload 2.0. Não sei se concordo muito com o termo usado, mas faz o mesmo efeito.
Vale ressaltar que muitas bibliotecas javascript fazem isso, inclusive com plugins bem maduros. Mas, de qualquer modo, vale a pena saber como funcionam esses plugins, entender qual a dinâmica e o conceito.
Em breve mostro outra forma de fazer upload com barra de progresso - tanto com uma linguagem server-side quanto usando Flash (e Action Script 3).
Você também pode gostar...
Comentários
Eu tava relendo a função de enviar o form com prototype esses dias, tu está quase me convencendo a usar prototype ao invés de jquery. hahahaha :)
[Responder este comentário]
[www]
Talvez você possa me orientar...
Eu mudei o layout do meu site (não sei se tem a ver) mas o fato é que estou tentando inserir uma meta tag, mas não consigo encontrar o </head>
O <head> tem mas o outro não encontrei,como faço pra inserir a bendita tag?
Um abraço e obrigado.
[Responder este comentário]
[www]
To implementando um sisteminha de upload em PHP e estou com dificuldade de colocar uma mensagem para orientar o usuário durante o carregamento do arquivo.
Me disseram que só em javascript para conseguir fazer isso, mas não estou conseguindo.
Se alguém quiser me auxiliar passo o link e depois a gente disponibiliza o sistema inteiro aí pra download da galera.
[Responder este comentário]
Vou esperar tu publicar então, aí dou uma olhada e se não conseguir resolver meu problema a gente conversa pra tentar fazer um sistema bem maduro!
Me dá um toque assim que publicar.
Valeu!
