JavaScript-Integration

JavaScript-Upload-Workflow

JavaScript kann Bilder hochladen, Anfragen an Backend-Endpunkte senden und KI-verarbeitete Bilder sofort in Webanwendungen anzeigen.

HTML-Struktur

Erstellen Sie ein einfaches Bild-Upload-Feld und einen Ergebnis-Container für Benutzer.

<input type="file"
id="imageInput">

<button onclick="removeBg()">
    Remove Background
</button>

<div id="result"></div>

JavaScript Fetch API Beispiel

Laden Sie Bilder mit asynchronen JavaScript-Anfragen hoch und zeigen Sie die verarbeiteten PNG-Ergebnisse sofort an.

async function removeBg(){

    const fileInput =
    document.getElementById("imageInput");

    const result =
    document.getElementById("result");

    if(!fileInput.files.length){

        alert("Select image first");

        return;
    }

    const formData = new FormData();

    formData.append(
        "file",
        fileInput.files[0]
    );

    result.innerHTML =
    "Processing...";

    try{

        const response = await fetch(
            "/ajax/remove-bg.php",
            {
                method:"POST",
                body:formData
            }
        );

        if(!response.ok){
            throw new Error();
        }

        const blob =
        await response.blob();

        const url =
        URL.createObjectURL(blob);

        result.innerHTML = `
            <img src="${url}"
            style="max-width:100%;">

            <br><br>

            <a href="${url}"
            download="no-bg.png">
                Download PNG
            </a>
        `;

    }catch{

        result.innerHTML =
        "Something went wrong";

    }
}

Empfohlene UI-Funktionen

• Drag-and-Drop-Uploads.
• Fortschrittsanzeigen und Ladeanimationen.
• Bildvorschauen vor dem Upload.
• Animierte Verarbeitungszustände.
• Download-Schaltflächen für PNG-Bilder.
• Benutzerfreundliche Fehlermeldungen.

Sicherheitsempfehlungen

• Verwenden Sie Backend-Proxy-Endpunkte für API-Anfragen.
• Validieren Sie hochgeladene Bilder serverseitig.
• Legen Sie Upload-Größenbeschränkungen fest.
• Beschränken Sie nicht unterstützte Bildformate.
• Verwenden Sie Rate-Limiting und Anfragedrosselung.

Häufige JavaScript-Fehler