Как получить данные изображения php через javascript copy-n-paste с XMLHttpRequest
Я пытаюсь сделать функцию загрузки изображений похожей на ту, что использует GMail. Вы копируете (CTRL-C) изображение со своего рабочего стола и вставляете (CTRL-V) его на веб-сайт. Затем изображение загружается с помощью XMLHttpRequest в php-скрипт, который обрабатывает входящий файл, причем «обработка» означает переименование и сохранение на сервере.
Я уже могу получить изображение (и -data), но не могу успешно отправить и получить запрос XMLHttpRequest. Мой код Javascript выглядит так:
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);
}
Обработка php (php/image-upload.php
) выглядит так:
$base64string = $_POST['file'];
file_put_contents('img.png', base64_decode($base64string));
я думаю$_POST['file']
остается пустым, но я не уверен. Более того, я также сталкиваюсь с тем, что «размер blob» (отображаемый с console.log ()) намного больше, чем фактический размер изображения. Но, возможно, это не имеет значения или вызвано кодировками.
Консоль разработчика отображает это.
{"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}
Если я просматриваю информацию о файле, щелкая правой кнопкой мыши на самом файле изображения, он показывает5,320 bytes (8 KB on disk)
по размеру.
Мне не обязательно использоватьXMLHttpRequest
Это было только то, что пришло мне в голову первым. Если есть лучший способ загрузки изображений в реальном времени на сервер с помощью javascript, сообщите нам об этом.