Upload de arquivos por AJAX com PHP e jQuery

Como fazer upload de arquivos por AJAX utilizando a biblioteca jQuery e PHP.

O upload de arquivos por AJAX não é compatível com navegadores antigos, devido a utilização de APIs desenvolvidas recentemente.

Montando o formulário

Repare que no “action” do formulário está o arquivo PHP que irá receber e processar o arquivo que será enviado.

<form name="meuForm" action="upload_arquivo.php">

    Arquivo<br>
    <input type="file" name="meuArquivo" id="meuArquivo" />
 
    <input type="button" >
Esse é um exemplo bem simples, obviamente tem vários detalhes que podem e devem ser melhorados!
 
Upload de arquivos por AJAX – jQuery
 
A principal função utilizada para o envio.
 
Obs. Não se esqueça de carregar a biblioteca jQuery antes do código abaixo, você pode carregar o jQuery diretamente do CDN da Google, otimizando o seu site: https://developers.google.com/speed/libraries/.
 
<script>

function upload(){
 
 var data = new FormData(); 
 
 data.append('file', document.getElementById('file').files[0]); 
 
 $.ajax({  
  url : $("form[name='meuForm']").attr("action"), 
  type : 'POST',
  data : data,
  processData: false, 
  contentType: false, 
  success : function(data) { 
  
        /* Retorno do PHP */   console.log(data);
   alert(data); }

 });

}

</script>
 
PHP
 
No arquivo upload_arquivo.php utilize o seguinte código:
 
if (isset($_FILES['meuArquivo']) && !empty($_FILES['meuArquivo']['name'])) {

  /*Arquivo está sendo enviado para pasta UPLOAD */  $move_upload_rs = move_uploaded_file($_FILES['file']['tmp_name'], "upload/" . $_FILES['meuArquivo']['name']);
  
  if($move_upload_rs){
     die("ok");
  }else{
     die("error");
  }
 
} else { 
  die("error"); 
}
 
É importante que o código acima seja complementado com as seguintes mensagem de erro: http://php.net/manual/pt_BR/features.file-upload.errors.php
 
 
 
 
 
 
 
Resumo
Nome do Artigo
Upload de arquivos por AJAX utilizando jQuery e PHP
Descrição
Tutorial ensinando a fazer o Upload de arquivos por AJAX utilizando jQuery para o envio do arquivo e o PHP para receber e salvar no diretório web
Autor
 Roger Mauricio Takemiya 
 
Editor
 Roger Mauricio Takemiya 
 
Logo do Editor
 
  
 
Tags: PHP, jquery, php basico, php para iniciantes