Como receber dados de imagem php através de javascript copy-n-paste com XMLHttpRequest
Eu tento fazer uma funcionalidade de upload de imagem semelhante à que o Gmail usa. Você copia (CTRL-C) uma imagem da sua área de trabalho e cola (CTRL-V) no site. A imagem é então enviada por meio de um XMLHttpRequest para um script php que lida com o arquivo recebido, pelo qual "manipular" significa renomear e armazenar no servidor.
Já posso buscar a imagem (e -data), mas não consigo enviar e receber com êxito o XMLHttpRequest. Meu código Javascript parece com isso:
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);
}
O manuseio php (php/image-upload.php
) parece com isso:
$base64string = $_POST['file'];
file_put_contents('img.png', base64_decode($base64string));
Eu acho que o$_POST['file']
fica vazio, mas não tenho certeza. Além do mais, eu também encontro o "tamanho do blob" (exibido com o console.log ()) é muito maior que o tamanho real da imagem. Mas talvez isso não importe ou seja causado por codificações.
O console do desenvolvedor exibe isso.
{"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}
Se eu visualizar as informações do arquivo clicando com o botão direito do mouse no arquivo de imagem real, ele mostrará5,320 bytes (8 KB on disk)
no tamanho.
Eu não preciso necessariamente usar umXMLHttpRequest
foi exatamente o que veio em minha mente primeiro. Se houver uma maneira melhor de conseguir o upload de imagens em tempo real para um servidor com javascript, informe-nos.