Ajax-Datei-Upload mit PHP und jQuery
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.php
Datei 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.php
in 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
- So laden Sie WordPress-Beiträge mit AJAX
- So verwenden Sie jQuery Autocomplete mit Ajax
- Datei-Upload per Drag & Drop mit JavaScript und PHP