Cómo recibir datos de imagen php sobre javascript copiar y pegar con XMLHttpRequest

Intento hacer una funcionalidad de carga de imágenes similar a la que usa GMail. Copia (CTRL-C) una imagen de tu escritorio y pégala (CTRL-V) en el sitio web. Luego, la imagen se carga a través de un XMLHttpRequest a un script php que maneja el archivo entrante, por lo que "manejar" significa renombrar y almacenar en el servidor.

Ya puedo recuperar la imagen (y -data), pero no puedo enviar y recibir con éxito el XMLHttpRequest. Mi código Javascript se ve así:

  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);
    }

El manejo de php (php/image-upload.php) tiene este aspecto:

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

creo que el$_POST['file'] Se queda vacío, pero no estoy seguro. Además, también encuentro que el "tamaño de blob" (que se muestra con console.log ()) es mucho más grande que el tamaño de imagen real. Pero tal vez eso no importa ni es causado por las codificaciones.

La consola de desarrolladores muestra esto.

{"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}

Si veo la información del archivo haciendo clic derecho en el archivo de imagen real, se muestra5,320 bytes (8 KB on disk) en tamaño.

No necesariamente necesito usar unXMLHttpRequest, fue justo lo que vino a mi mente primero. Si hay una mejor manera de lograr la carga de imágenes en tiempo real en un servidor con javascript, háganoslo saber.

Respuestas a la pregunta(4)

Su respuesta a la pregunta