0

Hello my fellow coding buddies.

I need some help, i've got this problem. I have this database, and i want to retrive this data into my code via JS.

My database info:

create table datadatabase (
id              int(10)  not null AUTO_INCREMENT PRIMARY KEY,
name            varchar(25) not null default '',
text            longtext(25) not null default '',
image           blob        not null  );

And i want the data into these fields.

<img src="<?php echo $img ?>"/>
<h3> <?php echo $text.','.$name  ?>  </h3>

But the problem is, the text & image is a slider and i want retrive new data everytime there is a function click on the "Next" button & the ID should be random so the first slides could be id 99 and the next slide could be 158 and so on.

$('.Next').click(function(e) {
 e.preventDefault();
 Slide.appendSlide('<img src"<?php echo $img ?>"/><h3> </h3>') 
})

How should i approach this? AND Thanks you so much. :)

user2563959
  • 87
  • 1
  • 12
  • 4
    You shouldn't be storing images in your database to begin with. What you should be doing is keeping your images in a directory and then referring to their file names in the database, which would allow you to then just echo the file name into the src attribute. – mtanti Dec 17 '13 at 21:12
  • I agree with @mtanti. But if you are set on doing it with blobs you could try the 2nd answer in this SO http://stackoverflow.com/questions/3259967/sending-displaying-a-base64-encoded-image I've never tried something like this so I make no guarantees as to whether or not it will work but you can give it a shot – elitechief21 Dec 17 '13 at 21:17

2 Answers2

1

First of all, it is not a good practice to store images in databases, but if you want to do this you need to create a script that output an specific image from the db (i.e. by ID) and then output the raw data with the specific content-type. (I also recommend to insert the type of the image in one of the database fields).

url: /image.php?id=5 image.php

<?php
$id = isset($_GET['id'])?intval($_GET['id']):0;
$query = mysql_query("SELECT img FROM datadatabase WHERE id = '$id'");
$row = mysql_fetch_array($query);
if($type=="pjpeg")
$type="jpeg"; // the type could change depending on the database image type
header("Content-type:$type");
echo $row['image'];
?>

for the other fields , just read the database as usual. The result:

<img src="http://..../image.php?id=<?php echo $id ?>"/>
<h3> <?php echo $text.','.$name  ?>  </h3>

$('.Next').click(function(e) {
 e.preventDefault();
 Slide.appendSlide('<img src"http://..../image.php?id=<?php echo $id?>"/><h3> </h3>') 
});

It is recommended as well implementing cache and image resizing before upload to avoid server payload.

There are others approaches like base64. I prefer by myself using the filesystem with image metadata instead of using only the database for image storage to make it scalable.

cardeol
  • 2,218
  • 17
  • 25
  • `intval` is a really poor substitute for [proper escaping](http://bobby-tables.com/php). It's also really poor form to give examples with the woefully out of date `mysql_query` when `mysqli` and PDO are hardly more complicated. – tadman Dec 17 '13 at 21:28
  • Thanks for the tips about the cache and image resizing, got any documents how to do it? – user2563959 Dec 17 '13 at 22:58
-1

Insert.php :

$bin_string = file_get_contents($_FILES["file"]["name"]);
$mysqli->query("INSERT INTO upload(image) VALUES ('" . $bin_string . "')");

Retrieve.php?id=1 : 

$result = $mysqli->query("SELECT * FROM upload id=1");
$output_bin_string = $result["image"];
header("Content-Type: image/png");
header("Content-Length: " . strlen($output_bin_string ));       
echo $output_bin_string;

Access Via Js :

 <img src="Retrieve.php?id=1" />
Gowthaman Thangavel
  • 111
  • 10