✅ Notícias, temas e plug-ins da WEB e do WordPress. Aqui compartilhamos dicas e as melhores soluções para sites.

Arrastar e soltar o upload de vários arquivos usando JavaScript e PHP

636

No passado, escrevi um artigo Carregar e soltar arquivos usando JavaScript e PHP. Alguns leitores pediram para escrever um artigo sobre como adicionar um carregador de arquivos que permite aos usuários fazer upload de vários arquivos com os recursos de arrastar e soltar.

Ao trabalhar em um aplicativo da web, pode ser necessário fazer upload de vários arquivos com um único uploader em seu formulário. Pode ajudar um usuário a fazer upload de arquivos únicos ou múltiplos de uma só vez. Eles não gostam de fazer upload de vários arquivos um por um. Oferecer esse recurso de upload de arquivo adiciona uma melhor experiência do usuário e também acelera seu aplicativo.

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ão carregados no servidor sem recarregar uma página inteira.

Começando

Como eu disse, não usaremos nenhum plugin externo para o recurso de arrastar e soltar. Vou escrever todo o código do zero. É muito mais fácil. Não há nada complexo nisso. Basta seguir as etapas abaixo e pronto.

Vamos criar um arquivo index.htmle adicionar o código abaixo nele.

index.html

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Drag Drop Multiple File Upload</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">         <div id="drag_upload_file">             <p>Drop file(s) here</p>             <p>or</p>             <p><input type="button" value="Select File(s)" onclick="file_explorer();"></p>             <input type="file" id="selectfile" multiple>         </div>     </div>     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>     <script src="custom.js"></script> </body> </html>

Aqui incluí style.csse custom.jsno qual adicionaremos um código relacionado. Como pretendemos usar Ajax, incluí uma biblioteca jQuery.

Para fornecer uma IU básica para nosso uploader de arquivo, vamos adicionar algumas propriedades CSS. Claro, você pode adicionar seu próprio CSS para dar uma aparência diferente ao carregador de arquivos.

style.css

#drop_file_zone {     background-color: #EEE;     border: #999 5px dashed;     width: 290px;     height: 200px;     padding: 8px;     font-size: 18px; } #drag_upload_file {     width:50%;     margin:0 auto; } #drag_upload_file p {     text-align: center; } #drag_upload_file #selectfile {     display: none; }

Depois disso, você deve ver o seu uploader de arquivo como a imagem abaixo:

Arrastar e soltar o upload de vários arquivos usando JavaScript e PHP

Arraste e solte vários arquivos usando JavaScript e PHP

Você está configurado com a IU básica. Agora, podemos prosseguir e escrever o código real para JavaScript e PHP que carregam arquivos em um servidor. Em nosso HTML, adicionei 2 métodos upload_file() e file_explorer () que recebem chamadas de arquivos suspensos e arquivos selecionados, respectivamente.

Vamos definir esses métodos e passar os arquivos para o script do lado do servidor, que carrega os arquivos em um servidor.

custom.js

var fileobj; function upload_file(e) {     e.preventDefault();     ajax_file_upload(e.dataTransfer.files); }   function file_explorer() {     document.getElementById('selectfile').click();     document.getElementById('selectfile').onchange = function() {         files = document.getElementById('selectfile').files;         ajax_file_upload(files);     }; }   function ajax_file_upload(file_obj) {     if(file_obj != undefined) {         var form_data = new FormData();         for(i=0; i<file_obj.length; i++) {              form_data.append('file[]', file_obj[i]);          }         $.ajax({             type: 'POST',             url: 'ajax.php',             contentType: false,             processData: false,             data: form_data,             success:function(response) {                 alert(response);                 $('#selectfile').val('');             }         });     } }

Por fim, escreva um código do lado do servidor para upload de arquivo no ajax.phparquivo.

ajax.php

<?php foreach($_FILES['file']['name'] as $key=>$val){     $file_name = $_FILES['file']['name'][$key];       // get file extension     $ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));       // get filename without extension     $filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);       if (!file_exists(getcwd(). '/uploads')) {         mkdir(getcwd(). '/uploads', 0777);     }       $filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;     move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/uploads/'.$filename_to_store); } echo "File(s) uploaded successfully"; die;

Este código cria um diretório de ‘uploads’ em seu servidor e armazena todos os arquivos dentro deste diretório. Ao armazenar arquivos em um servidor, tomamos o cuidado de manter o nome exclusivo de cada arquivo carregado usando a função PHP uniqid().

É tudo sobre o upload de vários arquivos usando o recurso arrastar e soltar. Espero que você saiba sobre isso. Eu gostaria de ouvir seus pensamentos e sugestões na seção de comentários abaixo.

Artigos relacionados

Fonte de gravação: artisansweb.net

Este site usa cookies para melhorar sua experiência. Presumiremos que você está ok com isso, mas você pode cancelar, se desejar. Aceitar Consulte Mais informação