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

No passado, escrevi um artigo Carregar e soltar arquivos usando JavaScript e PHP<\/a>. Alguns leitores pediram para escrever um artigo sobre como adicionar um carregador de arquivos que permite aos usu\u00e1rios fazer upload de v\u00e1rios arquivos com os recursos de arrastar e soltar.<\/p>\n

Ao trabalhar em um aplicativo da web, pode ser necess\u00e1rio fazer upload de v\u00e1rios arquivos com um \u00fanico uploader em seu formul\u00e1rio. Pode ajudar um usu\u00e1rio a fazer upload de arquivos \u00fanicos ou m\u00faltiplos de uma s\u00f3 vez. Eles n\u00e3o gostam de fazer upload de v\u00e1rios arquivos um por um. Oferecer esse recurso de upload de arquivo adiciona uma melhor experi\u00eancia do usu\u00e1rio e tamb\u00e9m acelera seu aplicativo.<\/p>\n

Neste artigo, mostro como adicionar este uploader de arquivo sem usar nenhum plugin externo de arrastar e soltar. Vou fazer o upload dos arquivos usando o Ajax. Isso significa que os arquivos ser\u00e3o carregados no servidor sem recarregar uma p\u00e1gina inteira.<\/p>\n

Come\u00e7ando<\/h3>\n

Como eu disse, n\u00e3o usaremos nenhum plugin externo para o recurso de arrastar e soltar. Vou escrever todo o c\u00f3digo do zero. \u00c9 muito mais f\u00e1cil. N\u00e3o h\u00e1 nada complexo nisso. Basta seguir as etapas abaixo e pronto.<\/p>\n

Vamos criar um arquivo index.html<\/code>e adicionar o c\u00f3digo abaixo nele.<\/p>\n

index.html<\/strong><\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Drag Drop Multiple File Upload<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div id=\"drop_file_zone\" ondrop=\"upload_file(event)\" ondragover=\"return false\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"drag_upload_file\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Drop file(s) here<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>or<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><input type=\"button\" value=\"Select File(s)\" onclick=\"file_explorer();\"><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"selectfile\" multiple>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"custom.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Aqui inclu\u00ed style.css<\/code>e custom.js<\/code>no qual adicionaremos um c\u00f3digo relacionado. Como pretendemos usar Ajax, inclu\u00ed uma biblioteca jQuery.<\/p>\n
Para fornecer uma IU b\u00e1sica para nosso uploader de arquivo, vamos adicionar algumas propriedades CSS. Claro, voc\u00ea pode adicionar seu pr\u00f3prio CSS para dar uma apar\u00eancia diferente ao carregador de arquivos.<\/p>\n
style.css<\/strong><\/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\u00a0\u00a0\u00a0width:50%;\n\u00a0\u00a0\u00a0\u00a0margin:0 auto;\n}\n#drag_upload_file p {\n\u00a0\u00a0\u00a0\u00a0text-align: center;\n}\n#drag_upload_file #selectfile {\n\u00a0\u00a0\u00a0\u00a0display: none;\n}<\/code><\/pre>\n
Depois disso, voc\u00ea deve ver o seu uploader de arquivo como a imagem abaixo:<\/p>\n
\"Arrastar<\/a><\/p>\n
Arraste e solte v\u00e1rios arquivos usando JavaScript e PHP<\/h3>\n
Voc\u00ea est\u00e1 configurado com a IU b\u00e1sica. Agora, podemos prosseguir e escrever o c\u00f3digo real para JavaScript e PHP que carregam arquivos em um servidor. Em nosso HTML, adicionei 2 m\u00e9todos upload_file() e file_explorer () que recebem chamadas de arquivos suspensos e arquivos selecionados, respectivamente.<\/p>\n
Vamos definir esses m\u00e9todos e passar os arquivos para o script do lado do servidor, que carrega os arquivos em um servidor.<\/p>\n
custom.js<\/strong><\/p>\n
var fileobj;\nfunction upload_file(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0ajax_file_upload(e.dataTransfer.files);\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\u00a0files = document.getElementById('selectfile').files;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ajax_file_upload(files);\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();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0; i<file_obj.length; i++) {\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file[]', file_obj[i]);\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\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
Por fim, escreva um c\u00f3digo do lado do servidor para upload de arquivo no ajax.php<\/code>arquivo.<\/p>\n
ajax.php<\/strong><\/p>\n
<?php\nforeach($_FILES['file']['name'] as $key=>$val){\n\u00a0\u00a0\u00a0\u00a0$file_name = $_FILES['file']['name'][$key];\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ get file extension\n\u00a0\u00a0\u00a0\u00a0$ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ get filename without extension\n\u00a0\u00a0\u00a0\u00a0$filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (!file_exists(getcwd(). '\/uploads')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir(getcwd(). '\/uploads', 0777);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;\n\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '\/uploads\/'.$filename_to_store);\n}\necho \"File(s) uploaded successfully\";\ndie;<\/code><\/pre>\n
Este c\u00f3digo cria um diret\u00f3rio de ‘uploads’ em seu servidor e armazena todos os arquivos dentro deste diret\u00f3rio. Ao armazenar arquivos em um servidor, tomamos o cuidado de manter o nome exclusivo de cada arquivo carregado usando a fun\u00e7\u00e3o PHP uniqid()<\/code>.<\/p>\n
\u00c9 tudo sobre o upload de v\u00e1rios arquivos usando o recurso arrastar e soltar. Espero que voc\u00ea saiba sobre isso. Eu gostaria de ouvir seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n