Arrastar e soltar o upload de arquivos usando JavaScript e PHP

Você está procurando integrar o recurso arrastar e soltar de upload de arquivos em seu site? Este recurso é amigável e reduz os cliques dos usuários. Neste artigo, estudamos como adicionar funcionalidade para arrastar e soltar o upload de arquivos usando JavaScript e PHP. Você também terá entrada de arquivo para navegar em um arquivo.

A interface de usuário final para upload de arquivo será semelhante à imagem abaixo.

Por que precisa do recurso Arrastar e Soltar para Upload de Arquivos?

Queremos sempre ter uma melhor experiência do usuário no site. Oferecer o recurso de arrastar e soltar para fazer upload de arquivos é uma opção fácil de usar para seus usuários. Muitos sites populares como Facebook e WordPress já usam esse recurso.

Este recurso parece melhor em comparação com a forma tradicional de upload de arquivos. Também melhora a experiência do usuário, pois o usuário simplesmente arrasta o arquivo e o carrega em um servidor.

Neste tutorial, daremos as duas opções aos usuários. Pode-se carregar o arquivo usando arrastar e soltar ou através da entrada do arquivo.

Vou usar o Ajax para fazer upload de arquivos no lado do servidor. Usando Ajax, sua página não será carregada. Ele simplesmente envia o arquivo para o servidor em segundo plano.

Integrar uploader de arrastar e soltar

Para começar, vamos primeiro escrever o código HTML. O código HTML a seguir terá um contêiner para upload de arquivo. Ele também inclui um arquivo CSS e JS que criarei nas próximas etapas.

<link rel="stylesheet" href="style.css">
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
    <div id="drag_upload_file">
        <p>Drop file here</p>
        <p>or</p>
        <p><input type="button" value="Select File" onclick="file_explorer();"></p>
        <input type="file" id="selectfile">
    </div>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="custom.js"></script>

No HTML acima, usei os 2 eventos – ondrop e onclick. Vou definir seus métodos no custom.jsarquivo. Antes disso, vamos adicionar o código CSS no style.cssarquivo.

#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;
}

Nosso objetivo é quando um usuário descarta ou procura um arquivo, o arquivo deve ser carregado no servidor. Para isso, você precisa escrever um código JavaScript que pega um arquivo do lado do cliente e o envia ao servidor.

Para lidar com esse fluxo, adicione o código abaixo no custom.jsarquivo.

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

O código JavaScript escrito acima detecta automaticamente as opções escolhidas pelo usuário para enviar um arquivo. Finalmente, a função ajax_file_upload()pega o objeto de arquivo e o passa para o arquivo Ajax.

Carregar arquivo no servidor

No arquivo Ajax, escreverei o código real que carrega o arquivo no servidor. Crie um arquivo chamado ajax.phpe adicione o código abaixo nele.

<?php
$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
 
if (!(in_array($_FILES['file']['type'], $arr_file_types))) {
    echo "false";
    return;
}
 
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
 
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. time(). '_'. $_FILES['file']['name']);
 
echo "File uploaded successfully.";

Este código PHP verifica primeiro se a pasta chamada ‘uploads’ existe em um servidor. Caso contrário, ele cria um diretório de ‘uploads’ e move o arquivo dentro dele. Você pode ajustar este caminho de diretório de acordo com sua necessidade.

Espero que você entenda como adicionar o upload de arquivos de arrastar e soltar usando PHP e JavaScript. Deixe-me saber sua opinião e sugestões no comentário abaixo.

Artigos relacionados

• Arrastar e soltar o upload de vários arquivos usando JavaScript e PHP
• Upload de arquivo Ajax com PHP e jQuery
  – TinyPNG compactar imagens usando PHP