AJAX file upload – Como fazer upload de um arquivo por Ajax

Tutorial ensinando a enviar um arquivo por Ajax, utilizando apenas Javascript e processando o upload com PHP.

Para fazer upload de um arquivo por AJAX iremos utilizar o código a seguir.

Com o objetivo de facilitar o entendimento, irei quebra-lo em várias partes.

Primeiro, o formulário

<form action="enviar.php" method="POST" id="form_envio">
  <label>Arquivo:</label><br>
  <input type="file" name="meu_arquivo" id="meu_arquivo" />
  <input type="submit" value="Enviar" />
</form>

Até ai nada de especial, formulário contendo nosso input do tipo “file”.

Vamos criar uma div com id “feedback” para passarmos o progresso e status do upload do arquivo.

<div id="div_status">...</div>

Código PHP

Crie um arquivo “enviar.php” com código a seguir.

if (isset($_FILES['meu_arquivo']) && !empty($_FILES['meu_arquivo']['name'])) {
  /*Arquivo está sendo enviado para pasta UPLOAD */
  $move_upload_rs = move_uploaded_file($_FILES['file']['tmp_name'], "upload/" . $_FILES['meu_arquivo']['name']);
  
  if($move_upload_rs){
     $resultado = array('status' => 'ok');
  }else{
     $resultado = array('error' => 'fail');
  }

} else {

  $resultado = array('error' => 'fail');

}

header('Content-Type: application/json');
echo json_encode($resultado);
die();

Upload está sendo feito para pasta “upload” que está no mesmo diretório do arquivo que acabamos de criar.

Variáveis necessárias

Declarando as variáveis necessárias para o envio.

var $formulario = document.getElementById('form_envio');

var $status = document.getElementById('div_status');

Código Javascript principal

Para enviar um arquivo por Ajax iremos utilizar XMLHttpRequest, uma API que permite o envio de dados entre um cliente e servidor, presente nos navegadores mais modernos.

O Código JS abaixo está comentado, não esqueça que este código tem que ir dentro da tag “” juntamente com as variáveis acima.

$formulario.addEventListener('submit', function(event){

  var xhr = new XMLHttpRequest();

  xhr.open("POST", $formulario.getAttribute('action'));

  var data = new FormData($formulario);

  /* Envio os dados */
  xhr.send(data);
  
  /* Listener para acompanhar a mudança do estado da requisição aberta */
  xhr.addEventListener('readystatechange', function() {

    /* Valido se o HTTP code retornado está OK */
    if (xhr.readyState === 4 && xhr.status == 200) {
      /* Converto a resposta p/ obj Json*/
      var json = JSON.parse(xhr.responseText);
      
      /* Conforme retornado pelo meu arquivo PHP utilizado para salvar o arquivo, informo o feedback final */
      /* Você pode trabalhar os status no arquivo PHP, dando mais respostas dos possíveis erros que podem ocorrer */
      if (!json.error && json.status === 'ok') {
        $status.innerHTML += 'Arquivo enviado com sucesso';
      } else {
        $status.innerHTML = 'Não foi possível enviar o arquivo';
      }

    }
  });

  /* Listerner para acompanhar o progresso do upload e atualizar no status a porcentagem */
  xhr.upload.addEventListener("progress", function(e) {
    if (e.lengthComputable) {

      /* Calculo a porcentagem já enviada */
      var percentage = Math.round((e.loaded * 100) / e.total);

      /* Passo o valor para minha div status */
      $status.innerHTML = String(percentage) + '%';
    }
  }, false);

  /* Mais um listener para observar o evento "load", quando a requisição é totalmente concluída */
  xhr.upload.addEventListener("load", function(e){

    /* passo para minha div status que está 100% concluído */
    $status.innerHTML = String(100) + '%';
  }, false);

}, false);