Upload de arquivo Ajax com PHP e jQuery

Você está procurando um upload de arquivo usando Ajax em PHP? O upload de um arquivo através do Ajax é uma tendência hoje em dia. Ele adiciona uma melhor experiência do usuário em um site. Neste artigo, mostro como fazer upload de arquivos por meio de Ajax com PHP e jQuery.

O upload de arquivos / imagens é uma tarefa normal para desenvolvedores. Existem vários casos em que você precisa criar a funcionalidade de upload de arquivos. Alguns dos exemplos comuns são o upload de fotos de perfil, imagens deslizantes, depoimentos, portfólios, carrosséis, etc.

Por que fazer upload de arquivos usando Ajax?

O principal motivo para realizar o upload de arquivos por meio do Ajax é que você não deseja atualizar uma página após o upload do arquivo. E é óbvio. Não adianta carregar uma página inteira se não for necessário. Se você estiver carregando uma página após o upload do arquivo, estará adicionando uma carga extra em um servidor.

O upload de arquivos usando Ajax reduz a carga desnecessária em um servidor e oferece uma melhor experiência do usuário no site.

Portanto, sem mais atrasos, vamos começar com o código.

Upload de arquivos usando Ajax com PHP e jQuery

Vamos começar criando um formulário que tem uma entrada de arquivo e o botão de envio. Adicione o código HTML abaixo em seu arquivo, digamos index.php.

<form>
    <p><input type="file" name="file" class="file" required></p>
    <input type="submit" name="submit" class="submit" value="Submit">
</form>

Como vou escrever um pouco de código JavaScript, adicionei as classes ‘arquivo’ e ‘enviar’ aos botões de entrada e envio de arquivo, respectivamente. Essas classes atuam como um identificador para os elementos do formulário.

Código JavaScript

Em seguida, escreva algum código JavaScript que dará uma chamada Ajax para um servidor e manipulará a resposta.

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
    $(function() {
        $('.submit').on('click', function() {
            var file_data = $('.file').prop('files')[0];
            if(file_data != undefined) {
                var form_data = new FormData();                  
                form_data.append('file', file_data);
                $.ajax({
                    type: 'POST',
                    url: 'ajax.php',
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success:function(response) {
                        if(response == 'success') {
                            alert('File uploaded successfully.');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
  
                        $('.file').val('');
                    }
                });
            }
            return false;
        });
    });
</script>

No código JavaScript acima, estou enviando o conteúdo do ajax.phparquivo para o arquivo e também lidando com a resposta.

Código PHP

Neste estágio, concluímos o envio do conteúdo do arquivo para o lado do servidor. Agora crie um arquivo ajax.phponde temos que escrever o código PHP que carrega os arquivos em um servidor.

ajax.php

<?php
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
  
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. $_FILES['file']['name']);
  
echo "success";
die();

O código PHP acima verifica primeiro o diretório de ‘uploads’. Se este diretório não existir, ele o cria e carrega o arquivo dentro desta pasta.

Espero que agora você possa implementar facilmente o upload de arquivos usando Ajax em seu site. Eu gostaria de ouvir sua opinião na seção de comentários abaixo.

Artigos relacionados

• Como carregar uma postagem do WordPress com AJAX
• Como usar o jQuery Autocomplete com Ajax
• Arrastar e soltar o upload de arquivos usando JavaScript e PHP