...
✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

Ajax-Datei-Upload mit PHP und jQuery

288

Suchen Sie einen Datei-Upload mit Ajax in PHP? Das Hochladen einer Datei über Ajax ist heutzutage ein Trend. Es fügt einer Website eine bessere Benutzererfahrung hinzu. In diesem Artikel zeige ich Ihnen, wie Sie mit PHP und jQuery Dateien über Ajax hochladen.

Das Hochladen von Dateien/Bildern ist eine regelmäßige Aufgabe für Entwickler. Es gibt mehrere Fälle, in denen Sie eine Funktion zum Hochladen von Dateien erstellen müssen. Einige der häufigsten Beispiele sind das Hochladen von Profilfotos, Slider-Bildern, Testimonials, Portfolios, Karussells usw.

Warum ist ein Datei-Upload mit Ajax erforderlich?

Der Hauptgrund für den Datei-Upload über Ajax besteht darin, dass Sie eine Seite nach dem Datei-Upload nicht aktualisieren möchten. Und es ist offensichtlich. Es macht keinen Sinn, eine ganze Seite zu laden, wenn es nicht notwendig ist. Wenn Sie eine Seite nach dem Datei-Upload laden, fügen Sie einem Server zusätzliche Last hinzu.

Das Hochladen von Dateien mit Ajax reduziert die unnötige Belastung eines Servers und bietet eine bessere Benutzererfahrung auf der Website.

Beginnen wir also ohne weitere Verzögerung mit dem Code.

Datei-Upload mit Ajax mit PHP und jQuery

Beginnen wir mit dem Erstellen eines Formulars mit einer Dateieingabe und der Schaltfläche zum Senden. Fügen Sie den folgenden HTML-Code in Ihre Datei ein, sagen Sie index.php.

<form>
    <p><input type="file" name="file" class="file" required></p>
    <input type="submit" name="submit" class="submit" value="Submit">
</form>

Da ich ein wenig JavaScript-Code schreiben werde, habe ich die Klasse ‘file’ und ‘submit’ zur Dateieingabe- bzw. Diese Klassen dienen als Bezeichner für Formularelemente.

JavaScript-Code

Schreiben Sie als Nächstes JavaScript-Code, der einen Ajax-Aufruf an eine Serverseite ausgibt und die Antwort verarbeitet.

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
    $(function() {
        $('.submit').on('click', function() {
            var file_data = $('.file').prop('files')[0];
            if(file_data != undefined) {
                var form_data = new FormData();                  
                form_data.append('file', file_data);
                $.ajax({
                    type: 'POST',
                    url: 'ajax.php',
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success:function(response) {
                        if(response == 'success') {
                            alert('File uploaded successfully.');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
  
                        $('.file').val('');
                    }
                });
            }
            return false;
        });
    });
</script>

Im obigen JavaScript-Code sende ich Dateiinhalt an die ajax.phpDatei und verarbeite auch die Antwort.

PHP-Code

In diesem Stadium sind wir damit fertig, den Dateiinhalt an die Serverseite zu senden. Erstellen Sie nun eine Datei, ajax.phpin die wir den PHP-Code schreiben müssen, der Dateien auf einen Server hochlädt.

ajax.php

<?php
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
  
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. $_FILES['file']['name']);
  
echo "success";
die();

Der obige PHP-Code sucht zuerst nach dem Verzeichnis ‘uploads’. Wenn dieses Verzeichnis nicht existiert, wird es erstellt und die Datei in diesen Ordner hochgeladen.

Ich hoffe, Sie können das Hochladen von Dateien mit Ajax jetzt einfach auf Ihrer Website implementieren. Ich würde gerne Ihre Meinung im Kommentarbereich unten hören.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen