{"id":25129,"date":"2021-05-26T18:42:00","date_gmt":"2021-05-26T15:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25129"},"modified":"2021-10-18T03:10:09","modified_gmt":"2021-10-18T00:10:09","slug":"trascina-e-rilascia-il-caricamento-di-file-utilizzando-javascript-e-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/trascina-e-rilascia-il-caricamento-di-file-utilizzando-javascript-e-php\/","title":{"rendered":"Trascina e rilascia il caricamento di file utilizzando JavaScript e PHP"},"content":{"rendered":"

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

L’interfaccia utente di caricamento del file finale sar\u00e0 simile all’immagine qui sotto.<\/p>\n

\"Trascina<\/a><\/p>\n

Perch\u00e9 \u00e8 necessario trascinare e rilasciare la funzione di caricamento dei file?<\/h3>\n

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

Questa funzione ha un aspetto migliore rispetto al modo tradizionale di caricamento dei file. Migliora anche l’esperienza dell’utente poich\u00e9 l’utente trascina semplicemente il file e lo carica su un server.<\/p>\n

In questo tutorial, forniremo entrambe le opzioni agli utenti. \u00c8 possibile caricare il file utilizzando il trascinamento della selezione o tramite l’input del file.<\/p>\n

User\u00f2 Ajax per caricare file sul lato server. Usando Ajax la tua pagina non verr\u00e0 caricata. Invia semplicemente il file al server in background.<\/p>\n

Integra l’uploader di file drag and drop<\/h3>\n

Per iniziare, scriviamo prima il codice HTML. Il seguente codice HTML avr\u00e0 un contenitore per il caricamento del file. Include anche un file CSS e JS che creer\u00f2 nei prossimi passaggi.<\/p>\n

<link rel=\"stylesheet\" href=\"style.css\">\n<div id=\"drop_file_zone\" ondrop=\"upload_file(event)\" ondragover=\"return false\">\n\u00a0\u00a0\u00a0\u00a0<div id=\"drag_upload_file\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Drop file here<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>or<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><input type=\"button\" value=\"Select File\" onclick=\"file_explorer();\"><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"selectfile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div>\n\u00a0\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"custom.js\"><\/script><\/code><\/pre>\n
Nell’HTML sopra, ho usato i 2 eventi: ondrop e onclick. Definir\u00f2 i loro metodi nel custom.js<\/code>file. Prima di ci\u00f2, aggiungiamo il codice CSS nel style.css<\/code>file.<\/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\u00a0width:50%;\n\u00a0\u00a0margin:0 auto;\n}\n#drag_upload_file p {\n\u00a0\u00a0text-align: center;\n}\n#drag_upload_file #selectfile {\n\u00a0\u00a0display: none;\n}<\/code><\/pre>\n
Il nostro obiettivo \u00e8 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.<\/p>\n
Per gestire questo flusso, aggiungi il codice seguente nel custom.js<\/code>file.<\/p>\n
var fileobj;\nfunction upload_file(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0fileobj = e.dataTransfer.files[0];\n\u00a0\u00a0\u00a0\u00a0ajax_file_upload(fileobj);\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\u00a0fileobj = document.getElementById('selectfile').files[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ajax_file_upload(fileobj);\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();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_obj);\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
Il codice JavaScript scritto sopra rileva automaticamente le opzioni scelte dall’utente per caricare un file. Infine, la funzione ajax_file_upload()<\/code>prende l’oggetto file e lo passa al file Ajax.<\/p>\n
Carica file sul server<\/h4>\n
Nel file Ajax, scriver\u00f2 il codice effettivo che carica il file sul server. Crea un file chiamato ajax.php<\/code>e aggiungi il codice seguente al suo interno.<\/p>\n
<?php\n$arr_file_types = ['image\/png', 'image\/gif', 'image\/jpg', 'image\/jpeg'];\n\u00a0\nif (!(in_array($_FILES['file']['type'], $arr_file_types))) {\n\u00a0\u00a0\u00a0\u00a0echo \"false\";\n\u00a0\u00a0\u00a0\u00a0return;\n}\n\u00a0\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. time(). '_'. $_FILES['file']['name']);\n\u00a0\necho \"File uploaded successfully.\";<\/code><\/pre>\n
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.<\/p>\n
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.<\/p>\n
articoli Correlati<\/h4>\n