Simples tutorial de upload de arquivos com AJAX e PHP

Conforme eu prometi no meu último tutorial sobre noções básicas de AJAX com PHP, aqui está outro tutorial utilizando uma forma simulada de AJAX e bem mais funcional e útil que o exemplo do outro tutorial. Apesar que no tutorial anterior a ideia era apenas passar noção básica sobre o assunto e nada mais.

Voltando ao que interessa neste tutorial. Antes de tudo vou dizer que para criar um sistema de Upload com puro AJAX não é possível devido às limitações de segurança do JavaScript. Todos os sistemas de upload que dizem ser AJAX usam algum pacote de ferramentas de terceiros ou apenas imita a sensação de estar usando AJAX. Mesmo assim vale a pena, pois ele faz o processo de upload de arquivos um pouco melhor. Na próxima seção iremos ver uma solução que imita o processo de AJAX, mas que na verdade utiliza um processo de carregamento normal junto à iFrames.

O conceito

– Criar um formulário HTML simples para upload de arquivos
– Definir o target para um iFrame invisível que está na página. (logo veremos sobre e porque disso)
– Chamar uma função JavaSript para exibir uma animação enquanto o PHP rola nos bastidores.
– Após o PHP terminar o upload, esconder a animação

Criando o arquivo HTML

O arquivo HTML que usaremos neste artigo é bem simples. Ele tem apenas um formulário  com um campo do tipo FILE e um botão SUBMIT. No entanto, não podemos esquecer de definirmos o parâmetro enctype. Na verdade, além do que mencionei, precisamos adicionar um pouco mais de código nesse HTML do que um simples formulário. Primeiro precisamos de um bloco onde nós vamos mostrar a animação que ilustrará o progresso do upload. Precisamos também de um outro bloco onde informamos ao visitante se o upload foi sucesso ou não. Além disso, precisamos adicionar um iFrame oculto para a página que é utilizada como target do  formulário. Também adicionaremos um evento ‘onsubmit’ no formulário.

Enfim, o ‘body’ de nosso arquivo HTML ficará assim:

Pegue o arquivo loader.gif aqui

<body>

    <p id="upload_process">Loading...<br/><img src="loader.gif" /></p>
    <p id="result"></p>

    <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >

        File: <input name="myfile" type="file" />
        <input type="submit" name="submitBtn" value="Upload" />

    </form>

    <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

</body>

Por padrão, o conteúdo do bloco da animação de progresso do upload estará oculto. Precisaremos de uma função JavaScript que faz com que este bloco fique visível caso o botão submit for pressionado. É um código muito simples, que apenas alterará o parâmetro de visibilidade.

function startUpload(){

    document.getElementById('upload_process').style.visibility = 'visible';
    return true;

}

E tem mais. Precisaremos de uma outra função, onde à chamaremos ao final do processo de upload. A finalidade desta função será imprimir uma mensagem de resultado que dependendo do valor de um devido parâmetro, esconderá o bloco da animação ilustrativa de progresso do upload novamente.

function stopUpload(success){

    var result = '';

    if (success == 1){
        document.getElementById('result').innerHTML ='<span>O upload do arquivo foi executado com sucesso!<\/span><br/><br/>';
    }
    else{
        document.getElementById('result').innerHTML = '<span>Ocorreu um erro durante o upload do arquivo!<\/span><br/><br/>';
    }

    document.getElementById('upload_process').style.visibility = 'hidden';
    return true;

}

Bom, antes de criarmos o código PHP, vamos criar um style CSS para caracterizar visualmente o bloco de progresso do upload. O estilo para usarmos no formulário é muito simples, mas o estilo do bloco de progresso e upload iremos definir o z-index e o parâmetro de visibilidade também.

#upload_process{
    z-index:100;
    position:absolute;
    visibility:hidden;
    text-align:center;
    width:400px;
    margin:0px;
    padding:0px;
    background-color:#fff;
    border:1px solid #ccc;
}

form{
    text-align:center;
    width:390px;
    margin:0px;
    padding:5px;
    background-color:#fff;
    border:1px solid #ccc;
}

Agora podemos focalizar no lado servidor e no responsável pela mágica do upload.

O código do lado servidor é escrito em PHP e é muito curto e simples. Primeiro precisamos definir o caminho de destino do arquivo. Neste caso, vamos utilizar o diretório que já estamos trabalhando. Depois introduzimos uma variável que mostrará se houve um erro ou não durante o processo de upload. Em seguida, movemos o arquivo carregado no diretório tmp para o diretório que mencionei um pouco antes.

Continuando…

Definimos uma variável para lidar com o resultado do upload, ou seja,  se foi sucesso ou falha e ao final do código inserimos um comando ‘sleep()’ para fazer a animação demorar um pouco mais no caso de uploads muito rápidos.

Enfim, o código PHP completo fica assim

<?php

$destination_path = getcwd().DIRECTORY_SEPARATOR;

$result = 0;

$target_path = $destination_path . basename( $_FILES['myfile']['name']);

if (@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path))
{
    $result = 1;
}

sleep(1);

?>

Para concluir vamos dar uma olhada naquele iFrame que falamos no início:

A saída do código PHP será exibido/executado dentro do iFrame. Como você se lembra, o iFrame não estará visível, no entanto, podemos chamar uma função JavaScript nele. Na verdade é exatamente esse o ponto em que podemos chamar a função JavaScript definida no código HTML para esconder a animação de progresso e exibir o resultado de upload de arquivos na página principal.

Nós podemos fazê-lo com o seguinte código JavaScript:

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

window.top.window.stopUpload(<?php echo $result; ?>);

</script>

É isso aí. Qualquer dúvida fala aí nos comentários.
Bons estudos.

Tópicos relacionandos

Publicado por

Razor

Conhecedor das artes gráficas, amante de design web, amigo íntimo do desenvolvimento web, com a pretensão de aprender e ajudar à quem busca conhecimento, me faço presente. =)

19 comentários sobre “Simples tutorial de upload de arquivos com AJAX e PHP”

  1. BOA NOITE!!

    GOSTEI MUITO DO TUTORIAL…..MAS TEM UM PROBLEMINHA……CRIEI A TABELA NO BANCO DE DADOS E QUANDO QUERO IMPORTAR O “USUARIOS SQL” DA O SEGUINTE ERRO….
    127.0.0.1 – usuarios
    Erro

    consulta SQL:

    { \ rtf1 \ ansi \ ansicpg1252 \ deff0 \ deflang1046{ \ fonttbl{ \ f0 \ fswiss \ fcharset0 Arial;

    Mensagens do MySQL : Documentação
    #1064 – You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘{\rtf1\ansi\ansicpg1252\deff0\deflang1046{\fonttbl{\f0\fswiss\fcharset0 Arial’ at line 1
    [ Voltar ]

    ME DE UMA FORCINHA AI……JA NÃO SEI MAIS O QUE FAZE…….BRIGADA

    1. Olá @Sil… pra que banco de dados neste tutorial?
      Mas enfim… se for alguma implementação sua… é porque o arquivo que vc está importando não foi salvo corretamente como um arquivo.sql
      Deve ter tentando colcoar o .sql no final mas o sistema deve salvo como txt.

      Nesse caso o ideal é salvar assim na hora que der o nome ao arquivo no bloco de notas:

      “arquivo.sql” COM ASPAS

      Bons estudos!

  2. Olá amigo,

    Não consegui fazer funcionar corretamente. Ao fazer o upload, a animação não desaparece, ou seja, fica rodando e não diz se deu certo ou errado. Deve ser pq não estou colocando os códigos no local corretamente. Criei um arquivo “funcoes.js” e nele contem “function startUpload()” e “function stopUpload(success)”. Criei um segundo arquivo chamado “upload.php” onde nele coloquei o trecho de código do “move_uploaded_file” e no “index.html” coloquei o “window.top.window.stopUpload();” dentro do iframe com as tags do javascript. Fiz algo de errado?

    1. Olá @Natanael, o iFrame fica limpo… sem nenhum código, pois nele vai ser aberto o arquivo upload.php que será chamado quando o formulário for enviado.
      No arquivo upload.php, mais precisamente abaixo de todo o código php você coloca o javascript que eu indiquei no tutorial:

      ... window.top.window.stopUpload()...

      Lembrando que as funções start… e stop… ficam no arquivo que tem o formulário…

      Resumindo, o exemplo deste tutorial possui 3 arquivos: upload.php, loader.gif e um terceiro que você pode colocar o nome que quiser… o qual, o conteúdo é as funções javascript, o CSS e o formulário com o cod do iframe.

      Da uma olhada no DEMO que montei pra que fique mais claro:
      http://www.sistemabasico.com.br/exemplos/teste-ajax-upload.php

      Bosn estudos!

    1. Olá @André, de fato esse objeto possibilita muitas coisas, porém ainda não se firmou devido a discrepância entre os navegadores.
      Eu acredito que vá se firmar de vez em algum momento, mas por enquanto não existe 100% de portabilidade em um script usando o FormData.
      Basta uma simples busca sobre o objeto e perceberá que nem todos os navegadores implementaram esse objeto.
      Obrigado de qualquer forma pela colaboração, acredito que sua afirmação será uma máxima em pouco tempo.
      Bons estudos!

  3. A saída do código PHP será exibido/executado dentro do iFrame. Como você se lembra, o iFrame não estará visível, no entanto, podemos chamar uma função JavaScript nele. Na verdade é exatamente esse o ponto em que podemos chamar a função JavaScript definida no código HTML para esconder a animação de progresso e exibir o resultado de upload de arquivos na página principal.
    Nós podemos fazê-lo com o seguinte código JavaScript:

    —script language javascript type text/javascript—

    —window.top.window.stopUpload -(- -)-;—-

    —script—

    Boa tarde!

    Olá Roberto, olá pessoal.
    Eu não consigo fazer aparecer a imagem no iframe depois q o upload é completado. Não sei onde coloca a função java acima. Aliás, não sei se fiz corretamente o arquivo ‘index’ (html ou php).
    Por favor me ajudem!
    Veja meu link de teste: http://luizmax.com/testes/upJava/

    Agradeço.
    SOU INICIANTE AINDA EM JAVA E PHP, MAS PARABÉNS PELO TUTORIAL!!

      1. O link que leva diretamente à imagem enviada. Como fariamos para adicionar o destino da imagem em um banco de dados?
        *(preciso resgatar a URL da imagem na pagina do formulario upload)

        1. Não entendi o porque da tua dificuldade, afinal no próprio demo que disponibilizei no tutorial exibe a imagem… se exibe a imagem é porque tem como pegar o endereço dela.
          Na verdade é montar o html com php.
          echo "http://www.site.com.br/caminho_que_definiu_pra_armazenar_as_imagens/".$_FILES['myfile']['name']."";

          Qualquer coisa fala aí
          Bons estudos!

  4. Olá Roberto tentei adaptar o código para download porém não estou conseguindo fazer a barra desaparecer apos a janela de download aparecer. Poderia me ajudar?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *