Trascina e rilascia il caricamento di file utilizzando JavaScript e PHP

Stai cercando di integrare la funzione di caricamento file drag and drop sul tuo sito web? Questa funzione è intuitiva e riduce i clic degli utenti. In questo articolo, studiamo come aggiungere funzionalità per il caricamento di file drag and drop utilizzando JavaScript e PHP. Avrai anche l’input di file per sfogliare un file.

L’interfaccia utente di caricamento del file finale sarà simile all’immagine qui sotto.

Perché è necessario trascinare e rilasciare la funzione di caricamento dei file?

Vogliamo sempre avere una migliore esperienza utente sul sito web. Offrire la funzionalità di trascinamento della selezione per caricare i file è un’opzione facile da usare per i tuoi utenti. Molti siti Web popolari come Facebook, WordPress utilizzano già questa funzione.

Questa funzione ha un aspetto migliore rispetto al modo tradizionale di caricamento dei file. Migliora anche l’esperienza dell’utente poiché l’utente trascina semplicemente il file e lo carica su un server.

In questo tutorial, forniremo entrambe le opzioni agli utenti. È possibile caricare il file utilizzando il trascinamento della selezione o tramite l’input del file.

Userò Ajax per caricare file sul lato server. Usando Ajax la tua pagina non verrà caricata. Invia semplicemente il file al server in background.

Integra l’uploader di file drag and drop

Per iniziare, scriviamo prima il codice HTML. Il seguente codice HTML avrà un contenitore per il caricamento del file. Include anche un file CSS e JS che creerò nei prossimi passaggi.

<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>

Nell’HTML sopra, ho usato i 2 eventi: ondrop e onclick. Definirò i loro metodi nel custom.jsfile. Prima di ciò, aggiungiamo il codice CSS nel style.cssfile.

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

Il nostro obiettivo è che quando un utente rilascia o sfoglia un file, il file dovrebbe essere caricato sul server. Per questo, devi scrivere un codice JavaScript che prende un file dal lato client e lo invia al server.

Per gestire questo flusso, aggiungi il codice seguente nel custom.jsfile.

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('');
            }
        });
    }
}

Il codice JavaScript scritto sopra rileva automaticamente le opzioni scelte dall’utente per caricare un file. Infine, la funzione ajax_file_upload()prende l’oggetto file e lo passa al file Ajax.

Carica file sul server

Nel file Ajax, scriverò il codice effettivo che carica il file sul server. Crea un file chiamato ajax.phpe aggiungi il codice seguente al suo interno.

<?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.";

Questo codice PHP verifica prima se la cartella denominata ‘uploads’ esiste su un server. In caso contrario, crea una directory "uploads" e sposta il file al suo interno. Puoi modificare questo percorso di directory in base alle tue esigenze.

Spero che tu capisca come aggiungere il caricamento di file trascina e rilascia utilizzando PHP e JavaScript. Fatemi sapere i vostri pensieri e suggerimenti nel commento qui sotto.

articoli Correlati

• Trascina e rilascia il caricamento di più file utilizzando JavaScript e PHP
• Caricamento di file Ajax con PHP e jQuery
  – TinyPNG Comprimi le immagini usando PHP