Ich versuche, eine Bild-Upload-Funktion zu erstellen, die der von GMail ähnelt. Sie kopieren ein Bild von Ihrem Desktop (STRG-C) und fügen es in die Website ein (STRG-V). Das Bild wird dann über eine XMLHttpRequest in ein PHP-Skript hochgeladen, das die eingehende Datei verarbeitet, wobei "Behandlung" das Umbenennen und Speichern auf dem Server bedeutet.

Ich kann das Bild (und -daten) bereits abrufen, aber ich kann die XMLHttpRequest nicht erfolgreich senden und empfangen. Mein Javascript-Code sieht so aus:

  document.onpaste = function(e){
        var items = e.clipboardData.items;
        console.log(JSON.stringify(items));
        if (e.clipboardData.items[1].kind === 'file') {
            // get the blob
            var imageFile = items[1].getAsFile();
            console.log(imageFile);
            var reader = new FileReader();
            reader.onload = function(event) {
                console.log(event.target.result); // data url!
                submitFileForm(event.target.result, 'paste');
            };
        }
    };

 function submitFileForm(file, type) {
        var formData = new FormData();
        formData.append('file', file);
        formData.append('submission-type', type);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'php/image-upload.php');
        xhr.onload = function () {
            if (xhr.status == 200) {
                console.log('all done: ');
            } else {
                console.log('Nope');
            }
        };

        xhr.send(formData);
    }

Der Umgang mit PHP (php/image-upload.php) sieht so aus:

$base64string = $_POST['file'];
file_put_contents('img.png', base64_decode($base64string));

Ich denke der$_POST['file'] bleibt leer, aber ich bin nicht sicher. Außerdem stelle ich fest, dass die "Blob-Größe" (angezeigt mit console.log ()) viel größer ist als die tatsächliche Bildgröße. Aber vielleicht ist das egal oder durch Kodierungen verursacht.

Die Entwicklerkonsole zeigt dies an.

{"0":{"type":"text/plain","kind":"string"},"1":{"type":"image/png","kind":"file"},"length":2} image-upload.js:8
Blob {type: "image/png", size: 135619, slice: function}

Wenn ich die Dateiinformationen durch Klicken mit der rechten Maustaste auf die aktuelle Bilddatei anzeige, wird dies angezeigt5,320 bytes (8 KB on disk) in Größe.

Ich muss nicht unbedingt eine verwendenXMLHttpRequestEs war genau das, woran ich zuerst dachte. Wenn es eine bessere Möglichkeit gibt, ein Hochladen von Bildern in Echtzeit auf einen Server mit Javascript zu erreichen, teilen Sie uns dies bitte mit.