Display all images stored as BLOB data from MySQL database

Question

I have uploaded some images to MySQL using PHP. I can also display 1 image everytime i modify the id in the HTML img tag. But now I'm trying to display all images stored in MySql database and the problem is when i use a 'While Loop' it only shows the text columns and not the images stored as BLOB data in MySQL...

I have a database called: my_db I have a table called: blob And i have 3 columns in my table: id, name & image

here is the code for the index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<form action="index.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image"><input type="submit" name="submit" value="Upload">
</form>
<?php

if(isset($_POST['submit']))
{
    mysql_connect("127.0.0.1","root","");
    mysql_select_db("my_db");

    $imageName = mysql_real_escape_string($_FILES["image"]["name"]);
    $imageData = mysql_real_escape_string(file_get_contents($_FILES["image"]["tmp_name"]));
    $imageType = mysql_real_escape_string($_FILES["image"]["type"]);

    if(substr($imageType,0,5) == "image")
    {
        mysql_query("INSERT INTO `blob` VALUES('','$imageName','$imageData')");
        echo "Image Uploaded!";
    }
    else
    {
        echo "Only images are allowed!";
    }

}

?>

<img src="showimage.php?id=11">

</body>
</html>

And here is the code for showimage.php:

<?php

mysql_connect("127.0.0.1","root","");
mysql_select_db("my_db");

if(isset($_GET['id']))
{
    $id = mysql_real_escape_string($_GET['id']);
    $query = mysql_query("SELECT * FROM `blob` WHERE `id`='$id'");
    while($row = mysql_fetch_assoc($query))
    {
        $imageData = $row["image"];
    }
    header("content-type: image/jpeg");
    echo $imageData;
}
else
{
    echo "Error!";
}

?>

Thanks in advance :-)

score 3 · Accepted Answer · edited May 23 '17 at 11:47

3

First you need to remove the if(isset($_GET['id']) statement because you want to display all images.

Next, query all images by changing your query to query without an id

$query = mysql_query("select * from `blob`");

Next, store the image data to an array.

$images = array();
while ($row = mysql_fetch_assoc($query)) {
  $images[] = $row['image'];
}

Finally, display all images. (Got the code to display multiple blobs from here)

/* header should be removed
   header("content-type: image/jpeg"); */
foreach ($images as $image) {
  echo '<img src="data:image/jpeg;base64,'. base64_encode($image) .'" />';
}

edited May 23 '17 at 11:47

Community

1
1

answered Jun 14 '14 at 19:18

Fabricator

12,722
2
27
40

When i tried that code, i get an error "The image cannot be displayed because it contains error" ?? – user3740970 Jun 14 '14 at 23:17
@user3740970, can you try it without `header("content-type: image/jpeg")`? – Fabricator Jun 14 '14 at 23:46
Then i get broken image icons (like writing the wrong path in HTML) of all the images, without an error ... – user3740970 Jun 15 '14 at 12:21
@user3740970, I made the mistake of putting an `;` after `base64_encode($image)`. It has been removed from the answer, but I don't think that was the problem. Can you update your post with your current code? – Fabricator Jun 15 '14 at 19:30
But there is one problem, when I update the page and display the images they disappear again after 1 min or something like that ?? – user3740970 Jun 15 '14 at 20:23
@user3740970, can you update your post with the most recent code? – Fabricator Jun 15 '14 at 20:39
Thanks @Fabricator, you save my time. – Md. Noor-A-Alam Siddique May 09 '17 at 05:38

score 0 · Answer 2 · edited Feb 16 '18 at 06:06

In Controller:

function display()
{
    $imagename= mysql_real_escape_string($_FILES["userfile"]["name"]);

    $imagedata= mysql_real_escape_string(file_get_contents($_FILES["userfile"]["tmp_name"]));
    $imagetype= mysql_real_escape_string($_FILES["userfile"]["type"]);

    $imagesize= mysql_real_escape_string($_FILES["userfile"]["size"]);
    $imagedetails = array(  'image_name'    => $imagename,
                                'image_data'   => $imagedata
            );
   // $insertedid =$this->model_data->insert_image($imagedetails);
    $this->load->model('model_data');   
    $data['imagee'] = $this->model_data->display_pic($insertedid);  // variable data holds image                
    $this->load->view('profile_view',$data);            
}

In model:

function display_pic($insertedid)
{   
    $query = mysql_query("SELECT * FROM employee_image WHERE id = ".$insertedid);
    $row = mysql_fetch_assoc($query);
    $this->db->stop_cache();
    return $row['image_data'];
}

function insert_image($imagedetails) { 

    $this->db->insert($this->table_name2,$imagedetails);            
    $id=$this->db->insert_id(); 
    return $id;
}

What is the purpose of pasting code for the view into a comment? Its absolutely unreadable. Revisit your question, click *Edit*, and place it where it belongs. Then, delete the comment. In addition, add some text to explain your answer. — jww, Jul 29 '14 at 11:56

Display all images stored as BLOB data from MySQL database

2 Answers2