Staram się, aby funkcja przesyłania obrazów była podobna do tej, którą wykorzystuje GMail. Kopiujesz (CTRL-C) obraz z pulpitu i wklejasz (CTRL-V) na stronę internetową. Obraz jest następnie przesyłany przez XMLHttpRequest do skryptu php, który obsługuje przychodzący plik, przy czym „obsługa” oznacza zmianę nazwy i przechowywanie na serwerze.

Mogę już pobrać obraz (i -data), ale nie mogę pomyślnie przesłać i odebrać XMLHttpRequest. Mój kod JavaScript wygląda tak:

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

Obsługa php (php/image-upload.php) na to wygląda:

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

Myślę że$_POST['file'] pozostaje pusty, ale nie jestem pewien. Co więcej, napotykam także „rozmiar kropli” (wyświetlany z console.log ()) jest znacznie większy niż rzeczywisty rozmiar obrazu. Ale może to bez znaczenia lub spowodowane kodowaniem.

Wyświetla to konsola programisty.

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

Jeśli wyświetlę informacje o pliku, klikając prawym przyciskiem myszy rzeczywisty plik obrazu, zostanie wyświetlony5,320 bytes (8 KB on disk) W rozmiarze.

Niekoniecznie muszę używaćXMLHttpRequest, to było po pierwsze to, co przyszło mi do głowy. Jeśli istnieje lepszy sposób na przesyłanie obrazów w czasie rzeczywistym na serwer z javascript, daj nam znać.