{"id":24845,"date":"2021-05-26T18:40:00","date_gmt":"2021-05-26T15:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24845"},"modified":"2021-10-18T02:38:44","modified_gmt":"2021-10-17T23:38:44","slug":"datei-upload-per-drag-drop-mit-javascript-und-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/datei-upload-per-drag-drop-mit-javascript-und-php\/","title":{"rendered":"Datei-Upload per Drag & Drop mit JavaScript und PHP"},"content":{"rendered":"

M\u00f6chten Sie die Drag-and-Drop-Funktion zum Hochladen von Dateien in Ihre Website integrieren? Diese Funktion ist benutzerfreundlich und reduziert die Klicks der Benutzer. In diesem Artikel untersuchen wir, wie Sie mithilfe von JavaScript und PHP Funktionen zum Hochladen von Dateien per Drag & Drop hinzuf\u00fcgen. Sie haben auch eine Dateieingabe, um eine Datei zu durchsuchen.<\/p>\n

Die endg\u00fcltige Benutzeroberfl\u00e4che f\u00fcr den Dateiupload sieht wie in der Abbildung unten aus.<\/p>\n

\"Datei-Upload<\/a><\/p>\n

Warum brauchen Sie die Funktion zum Hochladen von Dateien per Drag & Drop?<\/h3>\n

Wir m\u00f6chten immer eine bessere Benutzererfahrung auf der Website haben. Die Drag-and-Drop-Funktion zum Hochladen von Dateien ist eine benutzerfreundliche Option f\u00fcr Ihre Benutzer. Viele beliebte Websites wie Facebook, WordPress verwenden diese Funktion bereits.<\/p>\n

Diese Funktion sieht besser aus als die herk\u00f6mmliche Methode zum Hochladen von Dateien. Es verbessert auch die Benutzererfahrung, da der Benutzer die Datei einfach zieht und auf einen Server hochl\u00e4dt.<\/p>\n

In diesem Tutorial werden wir den Benutzern beide Optionen anbieten. Die Datei kann entweder per Drag & Drop oder \u00fcber die Dateieingabe hochgeladen werden.<\/p>\n

Ich werde Ajax verwenden, um Dateien auf der Serverseite hochzuladen. Mit Ajax wird Ihre Seite nicht geladen. Es sendet die Datei einfach im Hintergrund an den Server.<\/p>\n

Integrieren Sie Drag-and-Drop-Datei-Uploader<\/h3>\n

Um zu beginnen, schreiben wir zuerst den HTML-Code. Der folgende HTML-Code enth\u00e4lt einen Container f\u00fcr den Datei-Upload. Es enth\u00e4lt auch eine CSS- und JS-Datei, die ich in den n\u00e4chsten Schritten erstellen werde.<\/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
Im obigen HTML habe ich die 2 Ereignisse verwendet \u2013 ondrop und onclick. Ich werde ihre Methoden in der custom.js<\/code>Datei definieren. Zuvor f\u00fcgen wir den CSS-Code in die style.css<\/code>Datei ein.<\/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
Unser Ziel ist es, wenn ein Benutzer eine Datei ablegt oder durchsucht, die Datei auf den Server hochzuladen. Dazu m\u00fcssen Sie JavaScript-Code schreiben, der eine Datei von der Clientseite aufnimmt und an den Server sendet.<\/p>\n
Um diesen Ablauf zu handhaben, f\u00fcgen Sie den folgenden Code in die custom.js<\/code>Datei ein.<\/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
Der oben geschriebene JavaScript-Code erkennt automatisch die Optionen, die der Benutzer zum Hochladen einer Datei ausgew\u00e4hlt hat. Schlie\u00dflich nimmt die Funktion ajax_file_upload()<\/code>das Dateiobjekt und \u00fcbergibt es an die Ajax-Datei.<\/p>\n
Datei auf Server hochladen<\/h4>\n
In die Ajax-Datei schreibe ich den eigentlichen Code, der die Datei auf den Server hochl\u00e4dt. Erstellen Sie eine Datei namens ajax.php<\/code>und f\u00fcgen Sie den folgenden Code hinzu.<\/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
Dieser PHP-Code pr\u00fcft zuerst, ob der Ordner namens ‚uploads‘ auf einem Server existiert. Wenn nicht, erstellt es ein ‚uploads‘-Verzeichnis und verschiebt die Datei darin. Sie k\u00f6nnen diesen Verzeichnispfad nach Ihren W\u00fcnschen anpassen.<\/p>\n
Ich hoffe, Sie verstehen, wie Sie das Hochladen von Dateien per Drag-and-Drop mit PHP und JavaScript hinzuf\u00fcgen. Teilen Sie mir Ihre Gedanken und Vorschl\u00e4ge im Kommentar unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n