{"id":27696,"date":"2021-05-22T14:34:00","date_gmt":"2021-05-22T11:34:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27696"},"modified":"2021-10-18T04:10:17","modified_gmt":"2021-10-18T01:10:17","slug":"upload-de-arquivo-ajax-com-php-e-jquery","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/upload-de-arquivo-ajax-com-php-e-jquery\/","title":{"rendered":"Upload de arquivo Ajax com PHP e jQuery"},"content":{"rendered":"

Voc\u00ea est\u00e1 procurando um upload de arquivo usando Ajax em PHP? O upload de um arquivo atrav\u00e9s do Ajax \u00e9 uma tend\u00eancia hoje em dia. Ele adiciona uma melhor experi\u00eancia do usu\u00e1rio em um site. Neste artigo, mostro como fazer upload de arquivos por meio de Ajax com PHP e jQuery.<\/p>\n

O upload de arquivos \/ imagens \u00e9 uma tarefa normal para desenvolvedores. Existem v\u00e1rios casos em que voc\u00ea precisa criar a funcionalidade de upload de arquivos. Alguns dos exemplos comuns s\u00e3o o upload de fotos de perfil, imagens deslizantes, depoimentos, portf\u00f3lios, carross\u00e9is, etc.<\/p>\n

Por que fazer upload de arquivos usando Ajax?<\/h3>\n

O principal motivo para realizar o upload de arquivos por meio do Ajax \u00e9 que voc\u00ea n\u00e3o deseja atualizar uma p\u00e1gina ap\u00f3s o upload do arquivo. E \u00e9 \u00f3bvio. N\u00e3o adianta carregar uma p\u00e1gina inteira se n\u00e3o for necess\u00e1rio. Se voc\u00ea estiver carregando uma p\u00e1gina ap\u00f3s o upload do arquivo, estar\u00e1 adicionando uma carga extra em um servidor.<\/p>\n

O upload de arquivos usando Ajax reduz a carga desnecess\u00e1ria em um servidor e oferece uma melhor experi\u00eancia do usu\u00e1rio no site.<\/p>\n

Portanto, sem mais atrasos, vamos come\u00e7ar com o c\u00f3digo.<\/p>\n

Upload de arquivos usando Ajax com PHP e jQuery<\/h3>\n

Vamos come\u00e7ar criando um formul\u00e1rio que tem uma entrada de arquivo e o bot\u00e3o de envio. Adicione o c\u00f3digo HTML abaixo em seu arquivo, digamos index.php<\/code>.<\/p>\n

<form>\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"file\" name=\"file\" class=\"file\" required><\/p>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" class=\"submit\" value=\"Submit\">\n<\/form><\/code><\/pre>\n
Como vou escrever um pouco de c\u00f3digo JavaScript, adicionei as classes ‘arquivo’ e ‘enviar’ aos bot\u00f5es de entrada e envio de arquivo, respectivamente. Essas classes atuam como um identificador para os elementos do formul\u00e1rio.<\/p>\n
C\u00f3digo JavaScript<\/h4>\n
Em seguida, escreva algum c\u00f3digo JavaScript que dar\u00e1 uma chamada Ajax para um servidor e manipular\u00e1 a resposta.<\/p>\n
<script src=\"https:\/\/code.jquery.com\/jquery-3.5.0.js\"><\/script>\n<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0$(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.submit').on('click', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var file_data = $('.file').prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(file_data != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var form_data = new FormData();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: 'ajax.php',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success:function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == 'success') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('Something went wrong. Please try again.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.file').val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
No c\u00f3digo JavaScript acima, estou enviando o conte\u00fado do ajax.php<\/code>arquivo para o arquivo e tamb\u00e9m lidando com a resposta.<\/p>\n
C\u00f3digo PHP<\/h4>\n
Neste est\u00e1gio, conclu\u00edmos o envio do conte\u00fado do arquivo para o lado do servidor. Agora crie um arquivo ajax.php<\/code>onde temos que escrever o c\u00f3digo PHP que carrega os arquivos em um servidor.<\/p>\n
ajax.php<\/strong><\/p>\n
<?php\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. $_FILES['file']['name']);\n\u00a0\u00a0\necho \"success\";\ndie();<\/code><\/pre>\n
O c\u00f3digo PHP acima verifica primeiro o diret\u00f3rio de ‘uploads’. Se este diret\u00f3rio n\u00e3o existir, ele o cria e carrega o arquivo dentro desta pasta.<\/p>\n
Espero que agora voc\u00ea possa implementar facilmente o upload de arquivos usando Ajax em seu site. Eu gostaria de ouvir sua opini\u00e3o na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n