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" 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
2 comentários sobre “Upload de arquivos por AJAX com PHP e jQuery”