Call a blob data with ajax
I have a code, and this code call some datas of my MySql database and then show it in a <p>, it works perfectly, but when i want to call an image that is saved in a mediumblob type, it does not work.
Here's the code
Ajax.js
$(document).on("ready", function() {
$("#select").on("change", function(e) {
var option = $(this).val();
if(option.toLowerCase() !== "ninguno") {
var dataToSend = JSON.parse('{"name": "reference", "value": "'+option+'"}');
ajaxProcess(dataToSend);
} else {
$("p").each( function() {
$(this).html("");
});
}
});
function ajaxProcess(dataToSend) {
$.ajax({
url: "process.php",
dataType: "json",
data: dataToSend,
type: "get"
}
)
.done( function(data) {
$("#ram").html(data["ram"]);
$("#camara").html(data["camara"]);
$("#imagen").html(data["imagen"]); //Here's the problem
})
.fail( function(jqXHR,textStatus,errorThrown) {
console.log("Can´t get the data");
});
}
});
When i select the value in a combobox, it shows the error message "Can´t get the data"
Process.php
<?php
$connection = new mysqli("127.0.0.1","root","","labash");
$connection->set_charset("utf8");
if($connection->connect_errno)
throw new Exception("Error al conectar a la base de datos");
$stmt = $connection->stmt_init();
$query = "SELECT ram,camara,imagen FROM celulares WHERE reference=?";
if($stmt->prepare($query)) { // prepare the sentence
$name = $_GET["value"];
$stmt->bind_param("s", $name); //bind data
$stmt->execute(); // execute the sentence
$result = $stmt->get_result(); // get the result
$connection->close();
echo json_encode($result->fetch_assoc()); // get the data as JSON
}
In the html code i call the "ram" data (for example) in a <p id="ram"> and it works, but the image doesn´t.
Thanks Beforehand
php jquery ajax
edited Nov 21 '18 at 20:21
RiggsFolly
71.8k1867113
asked Nov 21 '18 at 20:04
Sebastian SanchezSebastian Sanchez
1
|
show 5 more comments
I have a code, and this code call some datas of my MySql database and then show it in a <p>, it works perfectly, but when i want to call an image that is saved in a mediumblob type, it does not work.
Here's the code
Ajax.js
$(document).on("ready", function() {
$("#select").on("change", function(e) {
var option = $(this).val();
if(option.toLowerCase() !== "ninguno") {
var dataToSend = JSON.parse('{"name": "reference", "value": "'+option+'"}');
ajaxProcess(dataToSend);
} else {
$("p").each( function() {
$(this).html("");
});
}
});
function ajaxProcess(dataToSend) {
$.ajax({
url: "process.php",
dataType: "json",
data: dataToSend,
type: "get"
}
)
.done( function(data) {
$("#ram").html(data["ram"]);
$("#camara").html(data["camara"]);
$("#imagen").html(data["imagen"]); //Here's the problem
})
.fail( function(jqXHR,textStatus,errorThrown) {
console.log("Can´t get the data");
});
}
});
When i select the value in a combobox, it shows the error message "Can´t get the data"
Process.php
<?php
$connection = new mysqli("127.0.0.1","root","","labash");
$connection->set_charset("utf8");
if($connection->connect_errno)
throw new Exception("Error al conectar a la base de datos");
$stmt = $connection->stmt_init();
$query = "SELECT ram,camara,imagen FROM celulares WHERE reference=?";
if($stmt->prepare($query)) { // prepare the sentence
$name = $_GET["value"];
$stmt->bind_param("s", $name); //bind data
$stmt->execute(); // execute the sentence
$result = $stmt->get_result(); // get the result
$connection->close();
echo json_encode($result->fetch_assoc()); // get the data as JSON
}
In the html code i call the "ram" data (for example) in a <p id="ram"> and it works, but the image doesn´t.
Thanks Beforehand
php jquery ajax
edited Nov 21 '18 at 20:21
RiggsFolly
71.8k1867113
asked Nov 21 '18 at 20:04
Sebastian SanchezSebastian Sanchez
1
What isimagenon your database.
– RiggsFolly
Nov 21 '18 at 20:09
You dont want to replace thehtmlof an image you will want to replace thesrc=""attribute. So something likesrc='data:image/jpeg;base64,<!-- base64 data -->'
– RiggsFolly
Nov 21 '18 at 20:11
So something like$("#imagen").src('data:image/jpeg;base64,' + data["imagen"]);
– RiggsFolly
Nov 21 '18 at 20:12
@RiggsFollyimagenis the name of the column in the database where i save the image
– Sebastian Sanchez
Nov 21 '18 at 20:13
Yes I know that! What does it contain, a base64 encoded image I would assume
– RiggsFolly
Nov 21 '18 at 20:14
|
show 5 more comments
I have a code, and this code call some datas of my MySql database and then show it in a <p>, it works perfectly, but when i want to call an image that is saved in a mediumblob type, it does not work.
Here's the code
Ajax.js
$(document).on("ready", function() {
$("#select").on("change", function(e) {
var option = $(this).val();
if(option.toLowerCase() !== "ninguno") {
var dataToSend = JSON.parse('{"name": "reference", "value": "'+option+'"}');
ajaxProcess(dataToSend);
} else {
$("p").each( function() {
$(this).html("");
});
}
});
function ajaxProcess(dataToSend) {
$.ajax({
url: "process.php",
dataType: "json",
data: dataToSend,
type: "get"
}
)
.done( function(data) {
$("#ram").html(data["ram"]);
$("#camara").html(data["camara"]);
$("#imagen").html(data["imagen"]); //Here's the problem
})
.fail( function(jqXHR,textStatus,errorThrown) {
console.log("Can´t get the data");
});
}
});
When i select the value in a combobox, it shows the error message "Can´t get the data"
Process.php
<?php
$connection = new mysqli("127.0.0.1","root","","labash");
$connection->set_charset("utf8");
if($connection->connect_errno)
throw new Exception("Error al conectar a la base de datos");
$stmt = $connection->stmt_init();
$query = "SELECT ram,camara,imagen FROM celulares WHERE reference=?";
if($stmt->prepare($query)) { // prepare the sentence
$name = $_GET["value"];
$stmt->bind_param("s", $name); //bind data
$stmt->execute(); // execute the sentence
$result = $stmt->get_result(); // get the result
$connection->close();
echo json_encode($result->fetch_assoc()); // get the data as JSON
}
In the html code i call the "ram" data (for example) in a <p id="ram"> and it works, but the image doesn´t.
Thanks Beforehand
php jquery ajax
edited Nov 21 '18 at 20:21
RiggsFolly
71.8k1867113
asked Nov 21 '18 at 20:04
Sebastian SanchezSebastian Sanchez
1
I have a code, and this code call some datas of my MySql database and then show it in a <p>, it works perfectly, but when i want to call an image that is saved in a mediumblob type, it does not work.
Here's the code
Ajax.js
$(document).on("ready", function() {
$("#select").on("change", function(e) {
var option = $(this).val();
if(option.toLowerCase() !== "ninguno") {
var dataToSend = JSON.parse('{"name": "reference", "value": "'+option+'"}');
ajaxProcess(dataToSend);
} else {
$("p").each( function() {
$(this).html("");
});
}
});
function ajaxProcess(dataToSend) {
$.ajax({
url: "process.php",
dataType: "json",
data: dataToSend,
type: "get"
}
)
.done( function(data) {
$("#ram").html(data["ram"]);
$("#camara").html(data["camara"]);
$("#imagen").html(data["imagen"]); //Here's the problem
})
.fail( function(jqXHR,textStatus,errorThrown) {
console.log("Can´t get the data");
});
}
});
When i select the value in a combobox, it shows the error message "Can´t get the data"
Process.php
<?php
$connection = new mysqli("127.0.0.1","root","","labash");
$connection->set_charset("utf8");
if($connection->connect_errno)
throw new Exception("Error al conectar a la base de datos");
$stmt = $connection->stmt_init();
$query = "SELECT ram,camara,imagen FROM celulares WHERE reference=?";
if($stmt->prepare($query)) { // prepare the sentence
$name = $_GET["value"];
$stmt->bind_param("s", $name); //bind data
$stmt->execute(); // execute the sentence
$result = $stmt->get_result(); // get the result
$connection->close();
echo json_encode($result->fetch_assoc()); // get the data as JSON
}
In the html code i call the "ram" data (for example) in a <p id="ram"> and it works, but the image doesn´t.
Thanks Beforehand
php jquery ajax
php jquery ajax
edited Nov 21 '18 at 20:21
RiggsFolly
71.8k1867113
asked Nov 21 '18 at 20:04
Sebastian SanchezSebastian Sanchez
1
edited Nov 21 '18 at 20:21
RiggsFolly
71.8k1867113
asked Nov 21 '18 at 20:04
Sebastian SanchezSebastian Sanchez
1
edited Nov 21 '18 at 20:21
RiggsFolly
71.8k1867113
edited Nov 21 '18 at 20:21
RiggsFolly
71.8k1867113
edited Nov 21 '18 at 20:21
RiggsFolly
71.8k1867113
71.8k1867113
asked Nov 21 '18 at 20:04
Sebastian SanchezSebastian Sanchez
1
asked Nov 21 '18 at 20:04
Sebastian SanchezSebastian Sanchez
1
asked Nov 21 '18 at 20:04
Sebastian SanchezSebastian Sanchez
1
1
What isimagenon your database.
– RiggsFolly
Nov 21 '18 at 20:09
You dont want to replace thehtmlof an image you will want to replace thesrc=""attribute. So something likesrc='data:image/jpeg;base64,<!-- base64 data -->'
– RiggsFolly
Nov 21 '18 at 20:11
So something like$("#imagen").src('data:image/jpeg;base64,' + data["imagen"]);
– RiggsFolly
Nov 21 '18 at 20:12
@RiggsFollyimagenis the name of the column in the database where i save the image
– Sebastian Sanchez
Nov 21 '18 at 20:13
Yes I know that! What does it contain, a base64 encoded image I would assume
– RiggsFolly
Nov 21 '18 at 20:14
|
show 5 more comments
What isimagenon your database.
– RiggsFolly
Nov 21 '18 at 20:09
You dont want to replace thehtmlof an image you will want to replace thesrc=""attribute. So something likesrc='data:image/jpeg;base64,<!-- base64 data -->'
– RiggsFolly
Nov 21 '18 at 20:11
So something like$("#imagen").src('data:image/jpeg;base64,' + data["imagen"]);
– RiggsFolly
Nov 21 '18 at 20:12
@RiggsFollyimagenis the name of the column in the database where i save the image
– Sebastian Sanchez
Nov 21 '18 at 20:13
Yes I know that! What does it contain, a base64 encoded image I would assume
– RiggsFolly
Nov 21 '18 at 20:14
What is
imagen on your database.– RiggsFolly
Nov 21 '18 at 20:09
What is
imagen on your database.– RiggsFolly
Nov 21 '18 at 20:09
You dont want to replace the
html of an image you will want to replace the src="" attribute. So something like src='data:image/jpeg;base64,<!-- base64 data -->'– RiggsFolly
Nov 21 '18 at 20:11
You dont want to replace the
html of an image you will want to replace the src="" attribute. So something like src='data:image/jpeg;base64,<!-- base64 data -->'– RiggsFolly
Nov 21 '18 at 20:11
So something like
$("#imagen").src('data:image/jpeg;base64,' + data["imagen"]);– RiggsFolly
Nov 21 '18 at 20:12
So something like
$("#imagen").src('data:image/jpeg;base64,' + data["imagen"]);– RiggsFolly
Nov 21 '18 at 20:12
@RiggsFolly
imagen is the name of the column in the database where i save the image– Sebastian Sanchez
Nov 21 '18 at 20:13
@RiggsFolly
imagen is the name of the column in the database where i save the image– Sebastian Sanchez
Nov 21 '18 at 20:13
Yes I know that! What does it contain, a base64 encoded image I would assume
– RiggsFolly
Nov 21 '18 at 20:14
Yes I know that! What does it contain, a base64 encoded image I would assume
– RiggsFolly
Nov 21 '18 at 20:14
|
show 5 more comments
1 Answer
1
active
oldest
votes
I solve it
First: I use a converter Base64 image
Then i copy the code and i save that code in the database
And here´s the new code of the Ajax.js file:
$("#imagen").attr('src', data["imagen_encode"]);
imagen_encode is the new column of my table in the database. i paste all the code of the Base64 converter and save it in the imagen_encode column. And i call it in html <img id="imagen">
answered Nov 21 '18 at 21:14
Sebastian SanchezSebastian Sanchez
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419715%2fcall-a-blob-data-with-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I solve it
First: I use a converter Base64 image
Then i copy the code and i save that code in the database
And here´s the new code of the Ajax.js file:
$("#imagen").attr('src', data["imagen_encode"]);
imagen_encode is the new column of my table in the database. i paste all the code of the Base64 converter and save it in the imagen_encode column. And i call it in html <img id="imagen">
answered Nov 21 '18 at 21:14
Sebastian SanchezSebastian Sanchez
1
add a comment |
I solve it
First: I use a converter Base64 image
Then i copy the code and i save that code in the database
And here´s the new code of the Ajax.js file:
$("#imagen").attr('src', data["imagen_encode"]);
imagen_encode is the new column of my table in the database. i paste all the code of the Base64 converter and save it in the imagen_encode column. And i call it in html <img id="imagen">
answered Nov 21 '18 at 21:14
Sebastian SanchezSebastian Sanchez
1
add a comment |
I solve it
First: I use a converter Base64 image
Then i copy the code and i save that code in the database
And here´s the new code of the Ajax.js file:
$("#imagen").attr('src', data["imagen_encode"]);
imagen_encode is the new column of my table in the database. i paste all the code of the Base64 converter and save it in the imagen_encode column. And i call it in html <img id="imagen">
answered Nov 21 '18 at 21:14
Sebastian SanchezSebastian Sanchez
1
I solve it
First: I use a converter Base64 image
Then i copy the code and i save that code in the database
And here´s the new code of the Ajax.js file:
$("#imagen").attr('src', data["imagen_encode"]);
imagen_encode is the new column of my table in the database. i paste all the code of the Base64 converter and save it in the imagen_encode column. And i call it in html <img id="imagen">
answered Nov 21 '18 at 21:14
Sebastian SanchezSebastian Sanchez
1
answered Nov 21 '18 at 21:14
Sebastian SanchezSebastian Sanchez
1
answered Nov 21 '18 at 21:14
Sebastian SanchezSebastian Sanchez
1
answered Nov 21 '18 at 21:14
Sebastian SanchezSebastian Sanchez
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419715%2fcall-a-blob-data-with-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is
imagenon your database.– RiggsFolly
Nov 21 '18 at 20:09
You dont want to replace the
htmlof an image you will want to replace thesrc=""attribute. So something likesrc='data:image/jpeg;base64,<!-- base64 data -->'– RiggsFolly
Nov 21 '18 at 20:11
So something like
$("#imagen").src('data:image/jpeg;base64,' + data["imagen"]);– RiggsFolly
Nov 21 '18 at 20:12
@RiggsFolly
imagenis the name of the column in the database where i save the image– Sebastian Sanchez
Nov 21 '18 at 20:13
Yes I know that! What does it contain, a base64 encoded image I would assume
– RiggsFolly
Nov 21 '18 at 20:14