jQuery-Upload-Datei AJAX
Eine objektähnliche Konfiguration definiert AJAX hauptsächlich mit mehreren Schlüssel-Wert-Paaren. Diese Schlüssel und Werte leiten die Serverseite und lassen Sie vom Server lesen und Daten an den Server senden.
Mit jQuery können wir einfach ein Beispiel implementieren, bei dem wir Daten oder Dateien auf den Server posten und sehen können, ob sie vollständig hochgeladen wurden.
Im folgenden Abschnitt werden wir versuchen, eine Instanz abzudecken, die Eingabewerte vom Benutzer entgegennimmt und diese später an den Server sendet. Wir werden auch prüfen, ob die Daten aktualisiert werden, ohne die Seite neu zu laden.
Wir werden auch die aktualisierten oder veröffentlichten Daten lesen. Lassen Sie uns zum Codesegment springen, um die Wörter besser sehen zu können.
Verwenden Sie AJAX und jQuery, um Dateien und Eingaben hochzuladen
Im Allgemeinen wird das Hochladen einer Datei einfacher, die Aktion Posten zu visualisieren. In diesem Fall haben wir also ein Feld Texteingabe und ein Feld Dateieingabe.
Nach erfolgreichem Posten in den Feldern erhalten wir eine durchsetzungsfähige Nachricht und die Daten werden hinzugefügt.
Für diese Aufgabe nehmen wir einen HTML-Teil, einen jQuery-Teil und schließlich eine PHP-Datei. Jede Datei hat ihre Spezifikation.
Der HTML-Code zeigt die Benutzeroberfläche, wo wir die Aufgabe des Hochladens einleiten. Als nächstes übernimmt das jQuery-Segment die Referenz der Eingabefelder über die id.
Außerdem wird hier AJAX hinzugefügt, und wir werden die PHP-Datei im AJAX als URL verbinden. Die PHP-Datei enthält den Verzeichnispfad, in dem die Daten veröffentlicht werden, und wir sehen die Ergebnisse in der Ausgabe.
Wir werden die Apache-Software über den XAMMP-Server verwenden.
- Zuerst müssen Sie XAMMP installieren und Apache starten.
- Außerdem müssen Sie PHP installieren und den Pfad von PHP zu den Umgebungsvariablen > Pfad der Systemvariablen hinzufügen.
- Gehen Sie zum XAMMP-Ordner und suchen Sie das Verzeichnis
htdocs. - Erstellen Sie im Verzeichnis
htdocseinen Ordner, in dem Ihre Dateienindex.html,index.jsundupload.phpaufbewahrt werden. - Erstellen Sie in diesem neuen Ordner einen Ordner namens
image.
Code-Auszug:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload file</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
</head>
<body style="background-color: gray">
<div class="container" style="width:50%;margin:25%;background:white;border:2px solid white">
<div style="padding: 10px">
<form id="myform" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="Name"></label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="form-group">
<label for="Image"></label>
<input type="file" id="image" class="form-control" name="image" placeholder="Image">
</div>
<div class="form-group" style="height:10px"></div>
<div class="form-group">
<input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send">
</div>
</form>
</div>
</div>
</body>
</html>
index.js:
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
var data = new FormData();
var form_data = $('#myform').serializeArray();
$.each(form_data, function(key, input) {
data.append(input.name, input.value);
});
var image = $('#image').val();
if (image != '') {
var file_data = $('input[name="image"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append('image[]', file_data[i]);
}
}
var request = $.ajax({
url: 'upload.php',
type: 'post',
processData: false,
contentType: false,
data: data,
});
request.done(function(response, textStatus, jqXHR) {
console.log('done!');
console.log(response);
});
request.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
})
})
})
hochladen.php:
<?php
$dir = __DIR__.'/image/'.$_FILES["image"]["name"][0];
if(move_uploaded_file($_FILES["image"]["tmp_name"][0], $dir))
{
$data = array(
"Status" => "Done",
"path" => $dir,
"Name" => $_POST['name'],
"Image" => $_FILES["image"]["name"][0]
);
echo json_encode($data);
}
else
{
$data = array(
"Status" => "Failed",
"path" => $dir,
"Name" => $_POST['name'],
"Image" => $_FILES["image"]["name"][0]
);
echo json_encode($data);
}
?>
Ausgang:
Als nächstes, nach all diesen Installationen und Vorbereitungen, setzen wir die Bootstrap- und jQuery-CDNs in unserem HTML und folgen dem Code. Wir haben die Methode $.each() verwendet, um die Formulareingaben zu durchlaufen.
Und schließlich gehen Sie zu Ihrem Browser und geben Sie localhost/"folder_name(inside the htdocs)" ein und sehen Sie die Benutzeroberfläche ähnlich dem Beispiel. Und wie in der Demonstration gezeigt, versuchen Sie, die Details auf der Konsole zu erreichen und überprüfen Sie den Ordner image des Projektordners, ob die Dateien korrekt hochgeladen wurden.
