Wie kann ich mit AJAX, PHP und jQuery effizient mehrere Bilder hochladen?

Hochladen mehrerer Bilder mit AJAX, PHP und jQuery

In dieser Diskussion wird das Problem des Hochladens mehrerer Bilder mit AJAX-Techniken angesprochen. Der Benutzer beschreibt, dass er bei der Übertragung mehrerer Dateien über AJAX auf Schwierigkeiten gestoßen sei, was zu einer unvollständigen Dateizustellung geführt habe. Dieser Artikel bietet eine umfassende Lösung, die JSON nutzt, um das Dateiobjekt effizient zu verarbeiten und einen erfolgreichen Upload zu ermöglichen.

HTML

Der folgende HTML-Code legt die Struktur der Webseite fest , einschließlich Elementen für die Drag-and-Drop-Funktionalität, die Dateieingabe und Abschnitte zur Anzeige des Upload-Fortschritts und Ergebnisse:

<div>
<p><strong>CSS</strong></p>
<p>Styling wird angewendet, um die Benutzeroberfläche zu verbessern und visuelle Hinweise während des Datei-Upload-Prozesses bereitzustellen:</p>
<pre class="brush:php;toolbar:false">#uploads {
  display: block;
  position: relative;
}

#uploads li {
  list-style: none;
}

JavaScript

Der JavaScript-Code übernimmt den Datei-Upload-Prozess und nutzt dazu AJAX mit dem Server kommunizieren. Es nutzt JSON zum Kapseln von Dateidaten und HTML5-Techniken zur Fortschrittsverfolgung:

$(document).on("change", "input[name^='file']", function (e) {
    e.preventDefault();
    var This = this,
        display = $("#uploads");

    // process file object
    $.each(This.files, function (i, file) {
        var reader = new FileReader(),
            dfd = new $.Deferred();
        reader.onload = function (e) {
            // convert file to data URL
            dfd.resolveWith(file, [e.target.result])
        };
        reader.readAsDataURL(new Blob([file], {
            "type": file.type
        }));
        dfd.then(function (data) {
            // send file data using AJAX
            $.ajax({
                url: "/echo/json/",
                type: "POST",
                data: {
                    "file": JSON.stringify({
                        "file": data,
                        "name": file.name,
                        "size": file.size,
                        "type": file.type
                    })
                }
            })
            .then(function (data, textStatus, jqxhr) {
                console.log(data)
                display.append("<br>

", img, "

"); return data }, function (jqxhr, textStatus, errorThrown) { console.log(errorThrown); return errorThrown }); }) }); });

PHP

Das PHP-Skript empfängt die im JSON-Format codierten Dateidaten und gibt sie zurück als JSON-String:

<?php if (isset($_POST["file"])) {
    // process file object
    $file = json_encode($_POST["file"]);
    // return file as JSON string
    echo $file;
};
?>

Durch die Implementierung dieser Techniken können Sie mehrere Bilder effizient mit AJAX, PHP hochladen, und jQuery. Der JSON-Ansatz vereinfacht die Dateiübertragung und die Verwendung der Fortschrittsverfolgung verbessert das Benutzererlebnis, indem Echtzeit-Feedback zum Upload-Status bereitgestellt wird.