Upload de arquivos por AJAX com PHP e jQuery

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

upload de arquivos por AJAX utilizando 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" onclick="upload();" name="Upload" />

</form>

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
Upload de arquivos por AJAX utilizando jQuery e PHP
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
Editor
Roger Mauricio Takemiya
Logo do Editor

Um comentário sobre “Upload de arquivos por AJAX com PHP e jQuery

  1. Eu estou realmente impressionado com suas habilidades de escrita, bem como com o layout do seu blog. Este é um tema pago ou você personalizou por você mesmo? De qualquer forma, mantenha a excelente qualidade de escrita, É raro ver um ótimo blog como esse nos dias de hoje.

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

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