Display inserted image from previous page

Question

I'm making a classified website that allows users to insert an image. The image data is sent thorugh the form to the page verify.php. Is it possible to display the image on verify.php? I've tried looking online but I only found answers from people inserting the image to mysql first and then displaying it.

Here is my code for the page where I want the image to be displayed.

$name = $_FILES["image"]["name"];
$type = $_FILES["image"]['type'];
$size = $_FILES["image"]["size"];
$temp = file_get_contents($_FILES["image"]["tmp_name"]);
$error = $_FILES['image']["error"];
echo "<img src='$temp'>"; //this displays the 
                          //binary code(I beleive that's what it s called)

Praveen Kumar Purushothaman · Accepted Answer · 2014-11-11T14:31:25.510

4

The value in $temp is the binary form of the image! So you can either base64_encode() it and display it this way:

echo "<img src='data:image/png;base64," . base64_encode($temp) . "'>";

edited Nov 11 '14 at 14:31

answered Nov 11 '14 at 13:57

Praveen Kumar Purushothaman

164,888
24
203
252

what if image is not PNG? – Roman Nov 11 '14 at 13:57
2

Also he needs to encode the binary to base64 like: echo "" – AlexL Nov 11 '14 at 14:00
This does not work. I get a broken link image and the binary code is displayed. Any suggestions? – Naeem Ahmed Nov 11 '14 at 14:05
@NaeemAhmed Can you try: `echo "";` – Praveen Kumar Purushothaman Nov 11 '14 at 14:14

score 0 · Answer 2 · answered Nov 11 '14 at 14:02

You need to use move_uploaded_file method and store image somewhere in public directory of server:

$name = $_FILES["image"]["name"];
$uploads_dir = '/uploads';
$tmp_name = $_FILES["image"]["tmp_name"]
move_uploaded_file($tmp_name, "$uploads_dir/$name");
echo "<img src=\"$uploads_dir/$name\">";

score 0 · Answer 3 · edited May 23 '17 at 10:26

There are 3 possibilities:

Method 1: Tell your browser that veryfy.php is an image. This works with

header("Content-type: image/png");

or any other image type (depending on your result). However this method does not allow you to publish text at same time.

Method 2: Save you picture (in database or on a fileserver) and then load it with <img...>

Method 3: Use base64 encoding:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">

However, this one should only be used for small files since it will slow down loading of page. More information: Embedding Base64 Images

Display inserted image from previous page

3 Answers3