Dieser Artikel zeigt, wie Bilder mit AJAX hochgeladen und eine Miniaturansicht ohne Seite nachgeladen werden. Der Prozess beinhaltet das clientseitige JavaScript für die Behandlung des Uploads und ein PHP-Backend für die Miniaturansichterstellung und Bildspeicherung.

client-side (JavaScript):

Die Kernfunktionen befinden sich in der Funktion uploadImage, in der $.ajaxFileUpload das Bild an den Server gesendet wird. Nach erfolgreichem Upload gibt der Server JSON -Daten zurück, die die URLs sowohl für die ursprünglichen als auch für die Miniaturbilder enthalten. Das JavaScript aktualisiert dann das Attribut src der Bildelemente (#image-thumb, das die Vorschau darstellt), um die Miniaturansicht anzuzeigen. Fehlerbehandlungs- und Ladeindikatoren sind ebenfalls enthalten.

uploadImage: function() {
    // ... (Existing code) ...
    $.ajaxFileUpload({
        // ... (Existing code) ...
        success: function(data) {
            // Update image preview
            _this.cache.$imgPreview.attr('src', data.thumb.img_src);
            _this.cache.$imgOriginal.attr('src', data.master.img_src);
            // ... (Existing code) ...
        },
        error: function(xhr, textStatus, errorThrown) {
            // ... (Existing code) ...
        },
        complete: function() {
            // ... (Existing code) ...
        }
    });
}

Das Bildvorschauelement wird zun?chst mit einem Platzhalterbild festgelegt:

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174036625652715.jpg"  class="lazy" alt="jQuery AJAX Image Upload Thumbnail Example " />

Formulareingabe enth?lt das Athumbnail src -Merkmal:

submitForm: function() {
    // ... (Existing code) ...
    formData += '&image-thumb=' + $('#image-thumb').attr('src');
    // ... (Existing code) ...
}

serverseitig (PHP):

Das PHP -Skript empf?ngt das hochgeladene Bild, erzeugt eine Miniaturansicht unter Verwendung einer geeigneten Bildmanipulationsbibliothek (z. B. GD oder Imagemagick) und gibt die URLs sowohl der ursprünglichen als auch der Miniaturbilder als JSON zurück. Die Bilder werden zun?chst in einem tempor?ren Verzeichnis gespeichert und nach Einreichung von Formular an den endgültigen Ort verschoben.

Sicherheitsüberlegungen:

Das Skript betont die Bedeutung der Festlegung geeigneter Dateiberechtigungen (z. B. 774) für das Bildverzeichnis, um den unbefugten Zugriff zu verhindern. Weitere Sicherheitsma?nahmen, wie z. B. Validierung und Gr??engrenzen von Dateitypen, werden empfohlen.

h?ufig gestellte Fragen (FAQs):

Der Artikel endet mit einem FAQ-Abschnitt, in dem gemeinsame Bedenken hinsichtlich mehrerer Bild-Uploads, Fortschrittsbalken, Dateivalidierung, Fehlerbehebung, Bildverz?gerungsgr??e, Form-Ladungen, Sicherheit, Datenbankspeicherung, Bildanzeige und Bildl?schung angesprochen werden. Diese FAQs bieten wertvolle Einblicke in Best Practices für robuste Image -Upload -Funktionen. Die vorgeschlagenen L?sungen nutzen verschiedene Techniken wie die HTML5-Datei-API, die Canvas-API und die serverseitige Validierung.

Das obige ist der detaillierte Inhalt vonJQuery Ajax Image laden Sie Vorschaubild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!