{"id":24859,"date":"2021-05-26T09:16:00","date_gmt":"2021-05-26T06:16:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24859"},"modified":"2021-10-18T02:38:57","modified_gmt":"2021-10-17T23:38:57","slug":"hochladen-mehrerer-dateien-per-drag-drop-mit-javascript-und-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/hochladen-mehrerer-dateien-per-drag-drop-mit-javascript-und-php\/","title":{"rendered":"Hochladen mehrerer Dateien per Drag & Drop mit JavaScript und PHP"},"content":{"rendered":"

In der Vergangenheit habe ich einen Artikel zum Hochladen von Dateien per Drag-and-Drop mit JavaScript und PHP geschrieben<\/a>. Einige Leser baten darum, einen Artikel \u00fcber das Hinzuf\u00fcgen eines Datei-Uploaders zu schreiben, der es Benutzern erm\u00f6glicht, mehrere Dateien mit den Drag-and-Drop-Funktionen hochzuladen.<\/p>\n

W\u00e4hrend Sie an einer Webanwendung arbeiten, m\u00fcssen Sie m\u00f6glicherweise mehrere Dateien mit einem einzigen Uploader in Ihr Formular hochladen. Es kann einem Benutzer helfen, einzelne oder mehrere Dateien auf einmal hochzuladen. Sie laden nicht gerne mehrere Dateien nacheinander hoch. Die Bereitstellung einer solchen Datei-Uploader-Funktion bietet eine bessere Benutzererfahrung und beschleunigt auch Ihre Anwendung.<\/p>\n

In diesem Artikel zeige ich Ihnen, wie Sie diesen Datei-Uploader hinzuf\u00fcgen, ohne ein externes Drag-and-Drop-Plugin zu verwenden. Ich werde die Dateien mit Ajax hochladen. Das bedeutet, dass Dateien auf den Server hochgeladen werden, ohne dass eine ganze Seite neu geladen wird.<\/p>\n

Einstieg<\/h3>\n

Wie gesagt, wir werden kein externes Plugin f\u00fcr die Drag-and-Drop-Funktion verwenden. Ich werde den gesamten Code von Grund auf neu schreiben. Es ist viel einfacher. Es gibt keine komplizierten Sachen darin. Befolgen Sie einfach die folgenden Schritte und Sie sind fertig.<\/p>\n

Lassen Sie uns eine Datei erstellen index.html<\/code>und unten den Code hinzuf\u00fcgen.<\/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
Hier habe ich eingeschlossen style.css<\/code>und custom.js<\/code>in dem wir einen verwandten Code hinzuf\u00fcgen werden. Da wir Ajax verwenden m\u00f6chten, habe ich eine jQuery-Bibliothek eingef\u00fcgt.<\/p>\n
Um eine grundlegende Benutzeroberfl\u00e4che f\u00fcr unseren Datei-Uploader bereitzustellen, f\u00fcgen wir einige CSS-Eigenschaften hinzu. Nat\u00fcrlich k\u00f6nnen Sie Ihr eigenes CSS hinzuf\u00fcgen, um dem Datei-Uploader ein anderes Aussehen zu verleihen.<\/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
Danach sollten Sie Ihren Datei-Uploader wie den folgenden Screenshot sehen:<\/p>\n
\"Hochladen<\/a><\/p>\n
Ziehen und Ablegen mehrerer Dateien mit JavaScript und PHP<\/h3>\n
Sie sind mit der grundlegenden Benutzeroberfl\u00e4che eingestellt. Jetzt k\u00f6nnen wir den eigentlichen Code f\u00fcr JavaScript und PHP schreiben, der Dateien auf einen Server hochl\u00e4dt. In unserem HTML habe ich 2 Methoden upload_file() und file_explorer() hinzugef\u00fcgt, die Aufrufe f\u00fcr Drop-Dateien bzw. Select-Dateien erhalten.<\/p>\n
Lassen Sie uns diese Methoden definieren und die Dateien an das serverseitige Skript \u00fcbergeben, das Dateien auf einen Server hochl\u00e4dt.<\/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
Schreiben Sie abschlie\u00dfend einen serverseitigen Code f\u00fcr den Dateiupload in die ajax.php<\/code>Datei.<\/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
Dieser Code erstellt ein ‚uploads‘-Verzeichnis auf Ihrem Server und speichert alle Dateien in diesem Verzeichnis. Beim Speichern von Dateien auf einem Server achten wir darauf, dass der eindeutige Name jeder hochgeladenen Datei mithilfe der PHP-Funktion beibehalten wird uniqid()<\/code>.<\/p>\n
Es geht darum, mehrere Dateien mit der Drag-Drop-Funktion hochzuladen. Ich hoffe, du hast davon erfahren. Ich w\u00fcrde gerne Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten h\u00f6ren.<\/p>\n
Zum Thema passende Artikel<\/h4>\n