0

Is this possible to display an image on the currunt browser session without uploading it to the server?

I am trying to display an image on my php page when users enter the upload button ,the uploaded image will temprory appear on the target url.

Here is my html form

<form action="demo.php"method="post"enctype="multipart/form-data">
<input type="file"name="uf">
<input type="submit"value="upload">
</form>

And the target file :

<?php
$pic=$_FILES["uf"]["name"];
echo "<img src='$pic'>";

It doesnt display the image. So is this somehow possible to display the image the way I am doing it?

Any help is much appriciated!

THANKS!

Amit Verma
  • 40,709
  • 21
  • 93
  • 115
  • The following previous answer on SO might be helpful: http://stackoverflow.com/questions/3996004/load-local-image-into-browser-using-javascript – Marc Audet Jan 02 '16 at 17:05
  • If you don't want to upload the image to the server then the [tag:php] tag and the PHP code in your question are out of place. – axiac Jan 02 '16 at 17:18

2 Answers2

2

Here you go: http://jsfiddle.net/LvsYc/

html:

<form method="post" enctype="multipart/form-data">
    <input type="file" id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

js (requires jQuery): 

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});
Niclas Larsson
  • 1,317
  • 8
  • 13
1

You can convert the image into base64, see http://www.motobit.com/util/base64/css-images-to-base64.asp .

It will generate an <img /> like this: <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAA// lot more characters" />

It is, in my mind, a bad practice, since your browser cache the images in order to avoid to send lots of requests for an image he already has.

In php: 

$path = 'myfolder/myimage.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

(taken from) How to convert an image to base64 encoding?

Community
  • 1
  • 1
Pierre Emmanuel Lallemant
  • 2,571
  • 1
  • 13
  • 23
  • 1
    @Ajey: because if you don't want to load images in your browser, you will still load the content of the base64 image. In my web-scrapper, I disable the image loading in order to minimise the requests to the server, with that you are forced to download the image data. It will be the same for google bots and etc, if they don't need to load the image etc. – Pierre Emmanuel Lallemant Jan 02 '16 at 17:07
  • @Ajey: Second reason: cache of browsers. The browsers store the images that you download when you are on websites, in order to avoid too much requests to the server. With base64, you force the image loading, you should have avoided 500 requests an hour per client for example, in case the client is active. – Pierre Emmanuel Lallemant Jan 02 '16 at 17:14