Datei-Upload per Drag & Drop mit JavaScript und PHP

Möchten 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ügen. Sie haben auch eine Dateieingabe, um eine Datei zu durchsuchen.

Die endgültige Benutzeroberfläche für den Dateiupload sieht wie in der Abbildung unten aus.

Warum brauchen Sie die Funktion zum Hochladen von Dateien per Drag & Drop?

Wir möchten immer eine bessere Benutzererfahrung auf der Website haben. Die Drag-and-Drop-Funktion zum Hochladen von Dateien ist eine benutzerfreundliche Option für Ihre Benutzer. Viele beliebte Websites wie Facebook, WordPress verwenden diese Funktion bereits.

Diese Funktion sieht besser aus als die herkömmliche Methode zum Hochladen von Dateien. Es verbessert auch die Benutzererfahrung, da der Benutzer die Datei einfach zieht und auf einen Server hochlädt.

In diesem Tutorial werden wir den Benutzern beide Optionen anbieten. Die Datei kann entweder per Drag & Drop oder über die Dateieingabe hochgeladen werden.

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.

Integrieren Sie Drag-and-Drop-Datei-Uploader

Um zu beginnen, schreiben wir zuerst den HTML-Code. Der folgende HTML-Code enthält einen Container für den Datei-Upload. Es enthält auch eine CSS- und JS-Datei, die ich in den nächsten Schritten erstellen werde.

<link rel="stylesheet" href="style.css">
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
    <div id="drag_upload_file">
        <p>Drop file here</p>
        <p>or</p>
        <p><input type="button" value="Select File" onclick="file_explorer();"></p>
        <input type="file" id="selectfile">
    </div>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="custom.js"></script>

Im obigen HTML habe ich die 2 Ereignisse verwendet – ondrop und onclick. Ich werde ihre Methoden in der custom.jsDatei definieren. Zuvor fügen wir den CSS-Code in die style.cssDatei ein.

#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;
}

Unser Ziel ist es, wenn ein Benutzer eine Datei ablegt oder durchsucht, die Datei auf den Server hochzuladen. Dazu müssen Sie JavaScript-Code schreiben, der eine Datei von der Clientseite aufnimmt und an den Server sendet.

Um diesen Ablauf zu handhaben, fügen Sie den folgenden Code in die custom.jsDatei ein.

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

Der oben geschriebene JavaScript-Code erkennt automatisch die Optionen, die der Benutzer zum Hochladen einer Datei ausgewählt hat. Schließlich nimmt die Funktion ajax_file_upload()das Dateiobjekt und übergibt es an die Ajax-Datei.

Datei auf Server hochladen

In die Ajax-Datei schreibe ich den eigentlichen Code, der die Datei auf den Server hochlädt. Erstellen Sie eine Datei namens ajax.phpund fügen Sie den folgenden Code hinzu.

<?php
$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
 
if (!(in_array($_FILES['file']['type'], $arr_file_types))) {
    echo "false";
    return;
}
 
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
 
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. time(). '_'. $_FILES['file']['name']);
 
echo "File uploaded successfully.";

Dieser PHP-Code prüft zuerst, ob der Ordner namens ‘uploads’ auf einem Server existiert. Wenn nicht, erstellt es ein ‘uploads’-Verzeichnis und verschiebt die Datei darin. Sie können diesen Verzeichnispfad nach Ihren Wünschen anpassen.

Ich hoffe, Sie verstehen, wie Sie das Hochladen von Dateien per Drag-and-Drop mit PHP und JavaScript hinzufügen. Teilen Sie mir Ihre Gedanken und Vorschläge im Kommentar unten mit.

Zum Thema passende Artikel

• Hochladen mehrerer Dateien per Drag & Drop mit JavaScript und PHP
• Ajax-Datei-Upload mit PHP und jQuery
  – TinyPNG Bilder mit PHP komprimieren