Bom dia!
Estou tentando enviar dados binários do Blob por Ajax para fazer o upload via PHP.
index.html:
document.getElementById("btnSave").addEventListener("click", event => {
canvas.toBlob(function(blob){
var reader = new FileReader();
var obBlob = "";
reader.readAsBinaryString(blob);
reader.onload = function () {
console.log(reader.result)//retorna o binário
$.ajax({
url : "upload.php",
type: "POST",
data: {obBlob: reader.result},
contentType: false,
processData: false,
dataType:"text/plain",
success: function(resultado) {
console.log(resultado);
},
error: function(resultado) {
console.log(resultado);
}
});
}//fim do reader
});
});
upload.php
$obBlob = !empty($_REQUEST["obBlob"])? $_REQUEST["obBlob"]: die("Nenhuma imgagem encontrada");
$servername = "localhost";
$username = "root";
$password = "";
$database = "fotos";
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO fotos (foto) VALUES ($obBlob)";
if(mysqli_query($conn, $sql)){
mysqli_close($conn);
echo $conn->error;
}else{
mysqli_close($conn);
die("Error:".$conn->error);
}
O log do console:
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …} abort : ƒ (e) always : ƒ () catch : ƒ (e) done : ƒ () fail : ƒ () getAllResponseHeaders : ƒ () getResponseHeader : ƒ (e) overrideMimeType : ƒ (e) pipe : ƒ () progress : ƒ () promise : ƒ (e) readyState : 4 responseText : "Nenhuma imgagem encontrada" setRequestHeader : ƒ (e,t) state : ƒ () status : 200 statusCode : ƒ (e) statusText : "OK" then : ƒ (t,r,i)
__proto__ : Object
detalhe do retorno do upload.php:
responseText : "Nenhuma imgagem encontrada"
tentei passar o blob, não chega nada.... inclusive eu coloquei o dataType no Ajax pois caso contrario ele não consegue nem encontrar o índice no $_REQUEST. Entretanto o $_REQUEST está chegando vazio! tentei passar o binário, também chega vazio... Ao menos é o que me parece!
Sei que existem várias resoluções prontas, mas como estou aprendendo, eu gostaria de entender os motivos... desde já agradeço a ajuda!
está dando erro, e no console está retornando os binários e o seguinte erro:
responseText : "
↵Notice: Undefined index: obBlob in C:\xampp\htdocs\WEBCAM\upload.php on line 2
Tentei passar por XMLHTTPRequest() também da seguinte forma:
document.getElementById("btnSave").addEventListener("click", event => {
canvas.toBlob(function(blob){
var oReq = new XMLHttpRequest();
oReq.open("POST","upload.php", true);
oReq.send(blob);
});
});
Galera... ainda não consegui enviar... tentei desta outra forma:
document.getElementById("btnSave").addEventListener("click", event => {
canvas.toBlob(function(blob){
var json = JSON.stringify(blob);
console.log(json);
var xhr = new XMLHttpRequest();
xhr.open("POST", 'upload.php', true);
xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
xhr.send(json);
});
});
neste caso, a variavel json mostra um objeto vazio!
de qualquer forma, minha melhor opção foi o ajax, pois o erro neste caso está vindo do upload.php que esta retornando OK, mas com a mensagem de "imagem não encontrada".
Mas como eu disse no inicio deste post, sou newbe em javascript... nao sei como faço pra receber o erro neste ultimo caso, então fico sem resposta no console... se alguém puder me dar algumas dicas eu fico muito grato!
Valeuu!!