{"id":24874,"date":"2021-05-26T09:37:00","date_gmt":"2021-05-26T06:37:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24874"},"modified":"2021-10-18T02:13:36","modified_gmt":"2021-10-17T23:13:36","slug":"glissez-deposez-plusieurs-fichiers-en-utilisant-javascript-et-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/glissez-deposez-plusieurs-fichiers-en-utilisant-javascript-et-php\/","title":{"rendered":"Glissez-d\u00e9posez plusieurs fichiers en utilisant JavaScript et PHP"},"content":{"rendered":"

Dans le pass\u00e9, j’ai \u00e9crit un article sur le t\u00e9l\u00e9chargement de fichiers par glisser-d\u00e9poser \u00e0 l’aide de JavaScript et PHP<\/a>. Certains lecteurs ont demand\u00e9 d’\u00e9crire un article sur l’ajout d’un t\u00e9l\u00e9chargeur de fichiers qui permet aux utilisateurs de t\u00e9l\u00e9charger plusieurs fichiers avec les fonctionnalit\u00e9s de glisser-d\u00e9poser.<\/p>\n

Lorsque vous travaillez sur une application Web, vous devrez peut-\u00eatre t\u00e9l\u00e9charger plusieurs fichiers avec un seul t\u00e9l\u00e9chargeur sur votre formulaire. Il peut aider un utilisateur \u00e0 t\u00e9l\u00e9charger un ou plusieurs fichiers en une seule fois. Ils n’aiment pas t\u00e9l\u00e9charger plusieurs fichiers un par un. Donner une telle fonctionnalit\u00e9 de t\u00e9l\u00e9chargement de fichiers ajoute une meilleure exp\u00e9rience utilisateur et acc\u00e9l\u00e8re \u00e9galement votre application.<\/p>\n

Dans cet article, je vous montre comment ajouter ce t\u00e9l\u00e9chargeur de fichiers sans utiliser de plugin externe de glisser-d\u00e9poser. Je vais t\u00e9l\u00e9charger les fichiers en utilisant l’Ajax. Cela signifie que les fichiers seront t\u00e9l\u00e9charg\u00e9s sur le serveur sans recharger une page enti\u00e8re.<\/p>\n

Commencer<\/h3>\n

Comme je l’ai dit, nous n’utiliserons aucun plugin externe pour la fonction glisser-d\u00e9poser. Je vais \u00e9crire tout le code \u00e0 partir de z\u00e9ro. C’est beaucoup plus facile. Il n’y a rien de complexe dedans. Suivez simplement les \u00e9tapes ci-dessous et vous avez termin\u00e9.<\/p>\n

Cr\u00e9ons un fichier index.html<\/code>et ajoutons le code ci-dessous.<\/p>\n

index.html<\/strong><\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Drag Drop Multiple File Upload<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div id=\"drop_file_zone\" ondrop=\"upload_file(event)\" ondragover=\"return false\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"drag_upload_file\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Drop file(s) here<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>or<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><input type=\"button\" value=\"Select File(s)\" onclick=\"file_explorer();\"><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"selectfile\" multiple>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"custom.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Ici, j’ai inclus style.css<\/code>et custom.js<\/code>dans lequel nous allons ajouter un code associ\u00e9. Comme nous avons l’intention d’utiliser Ajax, j’ai inclus une biblioth\u00e8que jQuery.<\/p>\n
Pour donner une interface utilisateur de base \u00e0 notre t\u00e9l\u00e9chargeur de fichiers, ajoutons quelques propri\u00e9t\u00e9s CSS. Bien s\u00fbr, vous pouvez ajouter votre propre CSS pour donner un aspect diff\u00e9rent au t\u00e9l\u00e9chargeur de fichiers.<\/p>\n
style.css<\/strong><\/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\u00a0\u00a0\u00a0width:50%;\n\u00a0\u00a0\u00a0\u00a0margin:0 auto;\n}\n#drag_upload_file p {\n\u00a0\u00a0\u00a0\u00a0text-align: center;\n}\n#drag_upload_file #selectfile {\n\u00a0\u00a0\u00a0\u00a0display: none;\n}<\/code><\/pre>\n
Apr\u00e8s cela, vous devriez voir votre t\u00e9l\u00e9chargeur de fichiers comme la capture d’\u00e9cran ci-dessous\u00a0:<\/p>\n
\"Glissez-d\u00e9posez<\/a><\/p>\n
Faites glisser et d\u00e9posez plusieurs fichiers \u00e0 l’aide de JavaScript et PHP<\/h3>\n
Vous \u00eates configur\u00e9 avec l’interface utilisateur de base. Maintenant, nous pouvons aller de l’avant et \u00e9crire du code r\u00e9el pour JavaScript et PHP qui t\u00e9l\u00e9charge des fichiers sur un serveur. Dans notre HTML, j’ai ajout\u00e9 2 m\u00e9thodes upload_file() et file_explorer () qui appellent respectivement les fichiers de suppression et les fichiers s\u00e9lectionn\u00e9s.<\/p>\n
D\u00e9finissons ces m\u00e9thodes et passons les fichiers au script c\u00f4t\u00e9 serveur qui t\u00e9l\u00e9charge les fichiers sur un serveur.<\/p>\n
custom.js<\/strong><\/p>\n
var fileobj;\nfunction upload_file(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0ajax_file_upload(e.dataTransfer.files);\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\u00a0files = document.getElementById('selectfile').files;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ajax_file_upload(files);\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();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0; i<file_obj.length; i++) {\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file[]', file_obj[i]);\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\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
Enfin, \u00e9crivez un code c\u00f4t\u00e9 serveur pour le t\u00e9l\u00e9chargement de fichier dans le ajax.php<\/code>fichier.<\/p>\n
ajax.php<\/strong><\/p>\n
<?php\nforeach($_FILES['file']['name'] as $key=>$val){\n\u00a0\u00a0\u00a0\u00a0$file_name = $_FILES['file']['name'][$key];\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ get file extension\n\u00a0\u00a0\u00a0\u00a0$ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ get filename without extension\n\u00a0\u00a0\u00a0\u00a0$filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (!file_exists(getcwd(). '\/uploads')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir(getcwd(). '\/uploads', 0777);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;\n\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '\/uploads\/'.$filename_to_store);\n}\necho \"File(s) uploaded successfully\";\ndie;<\/code><\/pre>\n
Ce code cr\u00e9e un r\u00e9pertoire ‘uploads’ sur votre serveur et stocke tous les fichiers dans ce r\u00e9pertoire. Lors du stockage des fichiers sur un serveur, nous nous occupons de conserver le nom unique de chaque fichier t\u00e9l\u00e9charg\u00e9 \u00e0 l’aide de la fonction PHP uniqid()<\/code>.<\/p>\n
Il s’agit de t\u00e9l\u00e9charger plusieurs fichiers \u00e0 l’aide de la fonction glisser-d\u00e9poser. J’esp\u00e8re que vous l’avez appris. J’aimerais entendre vos pens\u00e9es et suggestions dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n