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

Last updated Out 18, 2021

Contente

Arraste e solte vários arquivos usando JavaScript e PHP

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:

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.

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

Começando

Arraste e solte vários arquivos usando JavaScript e PHP

Artigos relacionados