Good morning!
I'm trying to send Blob binary data through Ajax to 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);
}
The console log:
{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
upload.php return detail:
responseText: "No images found"
I tried to pass the blob, nothing arrives .... I even put the dataType in Ajax because otherwise it can not even find the index in $ _REQUEST. However $ _REQUEST is coming empty! I tried to pass the binary, it also comes empty ... At least that's what it seems to me!
I know that there are several resolutions ready, but as I am learning, I would like to understand the reasons ... I thank you for the help!
is giving error, and in the console is returning the binaries and the following error:
responseText: "
↵ Notice : Undefined index: obBlob in C: \ xampp \ htdocs \ WEBCAM \ upload.php on line 2
I tried to pass XMLHTTPRequest () also in the following way:
document.getElementById("btnSave").addEventListener("click", event => {
canvas.toBlob(function(blob){
var oReq = new XMLHttpRequest();
oReq.open("POST","upload.php", true);
oReq.send(blob);
});
});
I have not been able to send yet ... I tried this way:
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);
});
});
In this case, the json variable shows an empty object!
Anyway, my best option was ajax, because the error in this case is coming from the upload.php that is returning OK, but with the message "image not found".
But as I said at the beginning of this post, I'm newbe in javascript ... I do not know how to get the error in this last case, so I get no answer on the console ... if someone can give me some tips I'm very grateful!
Thanks!