{"id":24862,"date":"2021-05-26T18:56:00","date_gmt":"2021-05-26T15:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24862"},"modified":"2021-10-18T02:13:25","modified_gmt":"2021-10-17T23:13:25","slug":"glisser-deposer-le-telechargement-de-fichiers-a-l-aide-de-javascript-et-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/glisser-deposer-le-telechargement-de-fichiers-a-l-aide-de-javascript-et-php\/","title":{"rendered":"Glisser-d\u00e9poser le t\u00e9l\u00e9chargement de fichiers \u00e0 l’aide de JavaScript et PHP"},"content":{"rendered":"

Cherchez-vous \u00e0 int\u00e9grer la fonction de t\u00e9l\u00e9chargement de fichiers par glisser-d\u00e9poser sur votre site Web\u00a0? Cette fonctionnalit\u00e9 est conviviale et r\u00e9duit les clics des utilisateurs. Dans cet article, nous \u00e9tudions comment ajouter des fonctionnalit\u00e9s pour le t\u00e9l\u00e9chargement de fichiers par glisser-d\u00e9poser \u00e0 l’aide de JavaScript et PHP. Vous aurez \u00e9galement une entr\u00e9e de fichier pour parcourir un fichier.<\/p>\n

L’interface utilisateur de t\u00e9l\u00e9chargement de fichier final ressemblera \u00e0 l’image ci-dessous.<\/p>\n

\"Glisser-d\u00e9poser<\/a><\/p>\n

Pourquoi avoir besoin de la fonctionnalit\u00e9 de t\u00e9l\u00e9chargement de fichiers par glisser-d\u00e9poser\u00a0?<\/h3>\n

Nous voulons toujours avoir une meilleure exp\u00e9rience utilisateur sur le site Web. Donner la fonction glisser-d\u00e9poser pour t\u00e9l\u00e9charger des fichiers est une option facile \u00e0 utiliser pour vos utilisateurs. De nombreux sites Web populaires comme Facebook, WordPress utilisent d\u00e9j\u00e0 cette fonctionnalit\u00e9.<\/p>\n

Cette fonctionnalit\u00e9 est meilleure que la m\u00e9thode traditionnelle de t\u00e9l\u00e9chargement de fichiers. Cela am\u00e9liore \u00e9galement l’exp\u00e9rience utilisateur car l’utilisateur fait simplement glisser le fichier et le t\u00e9l\u00e9charge sur un serveur.<\/p>\n

Dans ce tutoriel, nous allons donner les deux options aux utilisateurs. On peut t\u00e9l\u00e9charger le fichier soit par glisser-d\u00e9poser, soit via l’entr\u00e9e du fichier.<\/p>\n

Je vais utiliser Ajax pour t\u00e9l\u00e9charger des fichiers c\u00f4t\u00e9 serveur. En utilisant Ajax, votre page ne sera pas charg\u00e9e. Il envoie simplement le fichier au serveur en arri\u00e8re-plan.<\/p>\n

Int\u00e9grer le t\u00e9l\u00e9chargeur de fichiers par glisser-d\u00e9poser<\/h3>\n

Pour commencer, \u00e9crivons d’abord le code HTML. Le code HTML suivant aura un conteneur pour le t\u00e9l\u00e9chargement de fichiers. Il comprend \u00e9galement un fichier CSS et JS que je vais cr\u00e9er dans les prochaines \u00e9tapes.<\/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
Dans le code HTML ci-dessus, j’ai utilis\u00e9 les 2 \u00e9v\u00e9nements – ondrop et onclick. Je vais d\u00e9finir leurs m\u00e9thodes dans le custom.js<\/code>fichier. Avant cela, ajoutons le code CSS dans le style.css<\/code>fichier.<\/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
Notre objectif est que lorsqu’un utilisateur supprime ou parcourt un fichier, le fichier doit \u00eatre t\u00e9l\u00e9charg\u00e9 sur le serveur. Pour cela, vous devez \u00e9crire du code JavaScript qui prend un fichier c\u00f4t\u00e9 client et l’envoie au serveur.<\/p>\n
Pour g\u00e9rer ce flux, ajoutez le code ci-dessous dans le custom.js<\/code>fichier.<\/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
Le code JavaScript \u00e9crit ci-dessus d\u00e9tecte automatiquement les options choisies par l’utilisateur pour t\u00e9l\u00e9charger un fichier. Enfin, la fonction ajax_file_upload()<\/code>prend l’objet fichier et le transmet au fichier Ajax.<\/p>\n
T\u00e9l\u00e9charger le fichier sur le serveur<\/h4>\n
Dans le fichier Ajax, j’\u00e9crirai le code r\u00e9el qui t\u00e9l\u00e9charge le fichier sur le serveur. Cr\u00e9ez un fichier appel\u00e9 ajax.php<\/code>et ajoutez-y le code ci-dessous.<\/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
Ce code PHP v\u00e9rifie d’abord si le dossier appel\u00e9 ‘uploads’ existe sur un serveur. Sinon, il cr\u00e9e un r\u00e9pertoire ‘uploads’ et d\u00e9place le fichier \u00e0 l’int\u00e9rieur. Vous pouvez ajuster ce chemin de r\u00e9pertoire selon vos besoins.<\/p>\n
J’esp\u00e8re que vous comprenez comment ajouter un t\u00e9l\u00e9chargement de fichier par glisser-d\u00e9poser en utilisant PHP et JavaScript. Faites-moi part de vos r\u00e9flexions et suggestions dans le commentaire ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n