{"id":27863,"date":"2021-05-26T18:53:00","date_gmt":"2021-05-26T15:53:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27863"},"modified":"2021-10-18T04:09:04","modified_gmt":"2021-10-18T01:09:04","slug":"arrastar-e-soltar-o-upload-de-arquivos-usando-javascript-e-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/arrastar-e-soltar-o-upload-de-arquivos-usando-javascript-e-php\/","title":{"rendered":"Arrastar e soltar o upload de arquivos usando JavaScript e PHP"},"content":{"rendered":"

Voc\u00ea est\u00e1 procurando integrar o recurso arrastar e soltar de upload de arquivos em seu site? Este recurso \u00e9 amig\u00e1vel e reduz os cliques dos usu\u00e1rios. Neste artigo, estudamos como adicionar funcionalidade para arrastar e soltar o upload de arquivos usando JavaScript e PHP. Voc\u00ea tamb\u00e9m ter\u00e1 entrada de arquivo para navegar em um arquivo.<\/p>\n

A interface de usu\u00e1rio final para upload de arquivo ser\u00e1 semelhante \u00e0 imagem abaixo.<\/p>\n

\"Arrastar<\/a><\/p>\n

Por que precisa do recurso Arrastar e Soltar para Upload de Arquivos?<\/h3>\n

Queremos sempre ter uma melhor experi\u00eancia do usu\u00e1rio no site. Oferecer o recurso de arrastar e soltar para fazer upload de arquivos \u00e9 uma op\u00e7\u00e3o f\u00e1cil de usar para seus usu\u00e1rios. Muitos sites populares como Facebook e WordPress j\u00e1 usam esse recurso.<\/p>\n

Este recurso parece melhor em compara\u00e7\u00e3o com a forma tradicional de upload de arquivos. Tamb\u00e9m melhora a experi\u00eancia do usu\u00e1rio, pois o usu\u00e1rio simplesmente arrasta o arquivo e o carrega em um servidor.<\/p>\n

Neste tutorial, daremos as duas op\u00e7\u00f5es aos usu\u00e1rios. Pode-se carregar o arquivo usando arrastar e soltar ou atrav\u00e9s da entrada do arquivo.<\/p>\n

Vou usar o Ajax para fazer upload de arquivos no lado do servidor. Usando Ajax, sua p\u00e1gina n\u00e3o ser\u00e1 carregada. Ele simplesmente envia o arquivo para o servidor em segundo plano.<\/p>\n

Integrar uploader de arrastar e soltar<\/h3>\n

Para come\u00e7ar, vamos primeiro escrever o c\u00f3digo HTML. O c\u00f3digo HTML a seguir ter\u00e1 um cont\u00eainer para upload de arquivo. Ele tamb\u00e9m inclui um arquivo CSS e JS que criarei nas pr\u00f3ximas etapas.<\/p>\n

<link rel=\"stylesheet\" href=\"style.css\">\n<div id=\"drop_file_zone\" ondrop=\"upload_file(event)\" ondragover=\"return false\">\n\u00a0\u00a0\u00a0\u00a0<div id=\"drag_upload_file\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Drop file here<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>or<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><input type=\"button\" value=\"Select File\" onclick=\"file_explorer();\"><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"selectfile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div>\n\u00a0\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"custom.js\"><\/script><\/code><\/pre>\n
No HTML acima, usei os 2 eventos – ondrop e onclick. Vou definir seus m\u00e9todos no custom.js<\/code>arquivo. Antes disso, vamos adicionar o c\u00f3digo CSS no style.css<\/code>arquivo.<\/p>\n
#drop_file_zone {\n\u00a0\u00a0\u00a0\u00a0background-color: #EEE;\n\u00a0\u00a0\u00a0\u00a0border: #999 5px dashed;\n\u00a0\u00a0\u00a0\u00a0width: 290px;\n\u00a0\u00a0\u00a0\u00a0height: 200px;\n\u00a0\u00a0\u00a0\u00a0padding: 8px;\n\u00a0\u00a0\u00a0\u00a0font-size: 18px;\n}\n#drag_upload_file {\n\u00a0\u00a0width:50%;\n\u00a0\u00a0margin:0 auto;\n}\n#drag_upload_file p {\n\u00a0\u00a0text-align: center;\n}\n#drag_upload_file #selectfile {\n\u00a0\u00a0display: none;\n}<\/code><\/pre>\n
Nosso objetivo \u00e9 quando um usu\u00e1rio descarta ou procura um arquivo, o arquivo deve ser carregado no servidor. Para isso, voc\u00ea precisa escrever um c\u00f3digo JavaScript que pega um arquivo do lado do cliente e o envia ao servidor.<\/p>\n
Para lidar com esse fluxo, adicione o c\u00f3digo abaixo no custom.js<\/code>arquivo.<\/p>\n
var fileobj;\nfunction upload_file(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0fileobj = e.dataTransfer.files[0];\n\u00a0\u00a0\u00a0\u00a0ajax_file_upload(fileobj);\n}\n\u00a0\nfunction file_explorer() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('selectfile').click();\n\u00a0\u00a0\u00a0\u00a0document.getElementById('selectfile').onchange = function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fileobj = document.getElementById('selectfile').files[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ajax_file_upload(fileobj);\n\u00a0\u00a0\u00a0\u00a0};\n}\n\u00a0\nfunction ajax_file_upload(file_obj) {\n\u00a0\u00a0\u00a0\u00a0if(file_obj != undefined) {\n\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\u00a0form_data.append('file', file_obj);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\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\u00a0url: 'ajax.php',\n\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\u00a0processData: false,\n\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\u00a0success:function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#selectfile').val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
O c\u00f3digo JavaScript escrito acima detecta automaticamente as op\u00e7\u00f5es escolhidas pelo usu\u00e1rio para enviar um arquivo. Finalmente, a fun\u00e7\u00e3o ajax_file_upload()<\/code>pega o objeto de arquivo e o passa para o arquivo Ajax.<\/p>\n
Carregar arquivo no servidor<\/h4>\n
No arquivo Ajax, escreverei o c\u00f3digo real que carrega o arquivo no servidor. Crie um arquivo chamado ajax.php<\/code>e adicione o c\u00f3digo abaixo nele.<\/p>\n
<?php\n$arr_file_types = ['image\/png', 'image\/gif', 'image\/jpg', 'image\/jpeg'];\n\u00a0\nif (!(in_array($_FILES['file']['type'], $arr_file_types))) {\n\u00a0\u00a0\u00a0\u00a0echo \"false\";\n\u00a0\u00a0\u00a0\u00a0return;\n}\n\u00a0\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. time(). '_'. $_FILES['file']['name']);\n\u00a0\necho \"File uploaded successfully.\";<\/code><\/pre>\n
Este c\u00f3digo PHP verifica primeiro se a pasta chamada ‘uploads’ existe em um servidor. Caso contr\u00e1rio, ele cria um diret\u00f3rio de ‘uploads’ e move o arquivo dentro dele. Voc\u00ea pode ajustar este caminho de diret\u00f3rio de acordo com sua necessidade.<\/p>\n
Espero que voc\u00ea entenda como adicionar o upload de arquivos de arrastar e soltar usando PHP e JavaScript. Deixe-me saber sua opini\u00e3o e sugest\u00f5es no coment\u00e1rio abaixo.<\/p>\n
Artigos relacionados<\/h4>\n