Display the uploaded image after uploading on the web page

Question

I am trying to display the image that i have uploaded and moved to the desired location. Here is the code below.

if(isset($_FILES['image']))

// image upload from upload.html 

  {

      session_start();
      $_SESSION['str'];
      $_SESSION['img'];
      $image = basename($_FILES["image"]["name"]);
move_uploaded_file($_FILES['image']['tmp_name'], $_SESSION['str'].'_5'.$_SESSION['img']);
//I am trying to display the uploaded pic
      echo '<img src= "$image"/>';
  }

The image is stored at the location $_SESSION['str']. How can i display this uploaded image.

Sourabh Kumar Sharma · Answer 1 · 2015-05-22T08:34:09.993

0

iam assuming that $_SESSION['str'] session variable is the path till the folder where the image is stored Use the below code, give the complete url of the image:

echo "<img src = '".$_SESSION['str'].DIRECTORY_SEPARATOR.$image."'"." />";

edited May 22 '15 at 08:34

answered May 22 '15 at 08:25

Sourabh Kumar Sharma

2,864
3
25
33

It starts giving the syntax error as soon as I type in $_SESSION['str'] – Anurag Lal May 22 '15 at 08:27
@AnuragLal, please check now i tested it on my server to see if does not give any parse error, i hope your `$_SESSION['str']` is defined and session is started in your php page. – Sourabh Kumar Sharma May 22 '15 at 08:35
@Saurabh: Yes i have started the session_start(); and $_SESSION['str '] is defined. But it still return no image. – Anurag Lal May 22 '15 at 08:41
can you post what is being echoed in the output – Sourabh Kumar Sharma May 22 '15 at 08:45
I used the exact code you mentioned in this block. it gives a blank page with no output. – Anurag Lal May 22 '15 at 08:46
Or is possible to just display the image that i choose as a preview before uploading the final image. – Anurag Lal May 22 '15 at 08:51
@ use view source to see the img source and tell me – Sourabh Kumar Sharma May 22 '15 at 08:52
– Anurag Lal May 22 '15 at 08:58
look at this part of url there are two directory serparators: 234/\19799_1. If it is because of my code because of using directory separator, then try this code: `echo "";` – Sourabh Kumar Sharma May 22 '15 at 09:01
I tried it and i even tried to use the echo ""; but the image is not displayed. – Anurag Lal May 22 '15 at 09:03
are you atleast seeing an error image that is normally showen for missing images? – Sourabh Kumar Sharma May 22 '15 at 09:21
When I just use the echo ''; then yes i get the broken image icon on the page. But not now. – Anurag Lal May 22 '15 at 09:23
@Saurabh: if you have teamviewer, i can share my screen with you and you can try something yourself if possible. – Anurag Lal May 22 '15 at 09:54
at present i do not have access to team viewer, trying debugging the url using the inspect element and see when the image shows correctly, reflect the same changes in your php code. – Sourabh Kumar Sharma May 22 '15 at 09:57
When i tried to hard code the value it shows that it is out of scope of the root directory. So i cannot see the images that are stored at some other places, i will have to move image to root directory as well? – Anurag Lal May 22 '15 at 10:04
and i used inspect element and it shows the path exactly what is the path of file but it doesnt display the image. – Anurag Lal May 22 '15 at 10:13
and when used inspect element. the error that it shows is "not allowed to load local resource" and then the complete path of the file. – Anurag Lal May 22 '15 at 10:23
i recommed you to not use the complete url from root directory when displaying an image, use relative paths always. – Sourabh Kumar Sharma May 22 '15 at 10:25

score 0 · Answer 2 · answered May 22 '15 at 08:29

First of you say the location is stored in $_SESSION['str'] but you try to place an image with the value of basename($_FILES["image"][""name]).

Second; you should be using session_start() at the top of your page.

Third; in order to use a variable in a string, you need to use double quotes (") in stead of single quotes ('). Like so:

echo "<img src='$_SESSION['str']">;

But I'd use this:

echo '<img src="'. $_SESSION['str'] .'" >';

Also, are you sure you're not getting any errors? If you don't see any try placing this at the top of your file:

error_reporting(E_ALL);
ini_set('display_errors', 1);

score 0 · Accepted Answer · edited May 23 '17 at 11:58

You're using the wrong path to show the image. You're using the orginal name of the image $_FILES["image"]["name"] that was uploaded and then you use the move_uploaded_file function to move and save the file as $_SESSION['str'].'_5'.$_SESSION['img'] so that doesn't match (can't see how your session variables are created).

Also, is the location where you save the uploaded file to accessable by the client side? Move the file in the public area of your web application.

Update

I now understand from your comment that you want to save the file in a private location and then show that file in a <img> element in some HTML template. I changed the example code to embed the uploaded image into the HTML with base64.

You can use this function for creating the embed code. I took it from the answer from this question How to embed images...

function dataUri($file, $mime) 
{  
    $contents = file_get_contents($file);
    $base64   = base64_encode($contents);

    return 'data:' . $mime . ';base64,' . $base64;
}

So then you can use it like:

session_start();

// absolute path including the path to the public folder
$image_dest_path = './public/img/' . $_SESSION['str'] . '_5' . $_SESSION['img'];

// move file to server location
move_uploaded_file($_FILES['image']['tmp_name'], $image_dest_path);


// imbed the image into the HTML.
echo '<img src= "' . dataUri($image_dest_path, 'image/jpg') . '"/>';

Thanks for the valuable input. But I dont want to move the image to the public location. I want to retrieve the image from the location where i stored. — Anurag Lal, May 22 '15 at 08:45

sriram · Answer 4 · 2017-12-11T06:07:39.003

0

how to call the node js method in angular js?

edited Dec 11 '17 at 06:07

answered Oct 09 '17 at 11:00

sriram

3
1
3

In programming languages, there's a thing known as indentation. It is used to format program source code to improve readability. – mrid Oct 09 '17 at 11:53
example:- updateData(data){ var headers=new Headers(); headers.append("Content-Type","application/json"); return this.http.post("http://localhost:8080/update",JSON.stringify(data),{ headers:headers }).map(res => res.json()); } – sriram Jan 18 '18 at 09:40

Display the uploaded image after uploading on the web page

4 Answers4

Update