Hochladen mehrerer Dateien per Drag & Drop mit JavaScript und PHP

Last updated 18. Oktober 2021

Inhalt

Ziehen und Ablegen mehrerer Dateien mit JavaScript und PHP

In der Vergangenheit habe ich einen Artikel zum Hochladen von Dateien per Drag-and-Drop mit JavaScript und PHP geschrieben. Einige Leser baten darum, einen Artikel über das Hinzufügen eines Datei-Uploaders zu schreiben, der es Benutzern ermöglicht, mehrere Dateien mit den Drag-and-Drop-Funktionen hochzuladen.

Während Sie an einer Webanwendung arbeiten, müssen Sie möglicherweise 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.

In diesem Artikel zeige ich Ihnen, wie Sie diesen Datei-Uploader hinzufügen, 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.

Einstieg

Wie gesagt, wir werden kein externes Plugin für 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.

Lassen Sie uns eine Datei erstellen index.htmlund unten den Code hinzufügen.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Drag Drop Multiple File Upload</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
        <div id="drag_upload_file">
            <p>Drop file(s) here</p>
            <p>or</p>
            <p><input type="button" value="Select File(s)" onclick="file_explorer();"></p>
            <input type="file" id="selectfile" multiple>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="custom.js"></script>
</body>
</html>

Hier habe ich eingeschlossen style.cssund custom.jsin dem wir einen verwandten Code hinzufügen werden. Da wir Ajax verwenden möchten, habe ich eine jQuery-Bibliothek eingefügt.

Um eine grundlegende Benutzeroberfläche für unseren Datei-Uploader bereitzustellen, fügen wir einige CSS-Eigenschaften hinzu. Natürlich können Sie Ihr eigenes CSS hinzufügen, um dem Datei-Uploader ein anderes Aussehen zu verleihen.

style.css

#drop_file_zone {
    background-color: #EEE;
    border: #999 5px dashed;
    width: 290px;
    height: 200px;
    padding: 8px;
    font-size: 18px;
}
#drag_upload_file {
    width:50%;
    margin:0 auto;
}
#drag_upload_file p {
    text-align: center;
}
#drag_upload_file #selectfile {
    display: none;
}

Danach sollten Sie Ihren Datei-Uploader wie den folgenden Screenshot sehen:

Ziehen und Ablegen mehrerer Dateien mit JavaScript und PHP

Sie sind mit der grundlegenden Benutzeroberfläche eingestellt. Jetzt können wir den eigentlichen Code für JavaScript und PHP schreiben, der Dateien auf einen Server hochlädt. In unserem HTML habe ich 2 Methoden upload_file() und file_explorer() hinzugefügt, die Aufrufe für Drop-Dateien bzw. Select-Dateien erhalten.

Lassen Sie uns diese Methoden definieren und die Dateien an das serverseitige Skript übergeben, das Dateien auf einen Server hochlädt.

custom.js

var fileobj;
function upload_file(e) {
    e.preventDefault();
    ajax_file_upload(e.dataTransfer.files);
}
 
function file_explorer() {
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() {
        files = document.getElementById('selectfile').files;
        ajax_file_upload(files);
    };
}
 
function ajax_file_upload(file_obj) {
    if(file_obj != undefined) {
        var form_data = new FormData();
        for(i=0; i<file_obj.length; i++) {  
            form_data.append('file[]', file_obj[i]);  
        }
        $.ajax({
            type: 'POST',
            url: 'ajax.php',
            contentType: false,
            processData: false,
            data: form_data,
            success:function(response) {
                alert(response);
                $('#selectfile').val('');
            }
        });
    }
}

Schreiben Sie abschließend einen serverseitigen Code für den Dateiupload in die ajax.phpDatei.

ajax.php

<?php
foreach($_FILES['file']['name'] as $key=>$val){
    $file_name = $_FILES['file']['name'][$key];
 
    // get file extension
    $ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
 
    // get filename without extension
    $filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);
 
    if (!file_exists(getcwd(). '/uploads')) {
        mkdir(getcwd(). '/uploads', 0777);
    }
 
    $filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;
    move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/uploads/'.$filename_to_store);
}
echo "File(s) uploaded successfully";
die;

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().

Es geht darum, mehrere Dateien mit der Drag-Drop-Funktion hochzuladen. Ich hoffe, du hast davon erfahren. Ich würde gerne Ihre Gedanken und Vorschläge im Kommentarbereich unten hören.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net