JQuery Ajax Image laden Sie Vorschaubild

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/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174036625652715.jpg?x-oss-process=image/resize,p_40"  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!