getting images from the server and display them

Question

I have a problem. I would appreciate if you can guide me. I have some images located on a server. In my client code (jQuery) I need to get the images (the actual images, not their links on the server) from the server (by AJAX-php) and show the images on my page. When I receive the images, I do not want them to be saved on the client’s hard disk; I just need them temporarily (maybe the browser can keep them for me for that short time). Can you please help me? I dont know how to implement it with jQuery/php/Ajax and maybe JSON.

my current code is:

<script>
$(document).ready(function () {
    var phpFileName="serverSide.php";
    $.ajaxSetup({
        "url":phpFileName,
        });
    $.ajax({
        "type":"GET",
        async: false,
        "data":{
            "newvar1":"value1",
        },
        "success":function(data){
            var imageName  = data.split('^');
        }
    });

    $imageDirOnServer = "some/Diron/Server/";
    for(i=0;i<imageName.length;i++){
        $("#Cell").append("<div style='background-image:url("+$imageDirOnServer+imageName[i]+".bmp);'></div>");
    }    
});
</script>

and the php Code (serverSide.php):

<?php
for($k=0;$k<3;$k++){
        echo sprintf("%02d",$k+1);
        echo "^";
    }
?>

this code shows 01.bmp, 02.bmp and 03.bmp which are physically located on server, on my webpage. I want to change it so that the images are taken from the server by my webpage and then are displayed. I get images from the server when the page is loaded, the reason is that I do not want to have any client-server traffic after that. I mentioned that I do not want the images to be saved on client machine because I think it is not allowed (without user's permission) because of security purposes. However, browser's cache is ok for me. Thanks.

I'm not sure what you mean by I do not want them to be saved on the client’s hard disk. Anything accessed by a web browser will be saved to the cache on the users' hard drive, it is not possible to stop this. — Rory McCrossan
– Rory McCrossan, Commented Dec 2, 2011 at 17:08
Show the code you have so far, what's the directory on the server where the images are stored, etc. Your question is incomplete as it stands. — Icarus
– Icarus, Commented Dec 2, 2011 at 17:08
Even if you temporarily get pictures, you get them - means they are physically on some harddisk! Unless it is only for sure, where you can just use a regular <img> tag. Your question is really unclear, you probably mean something else. Give us some code or explain properly this time!! — Anonymous
– Anonymous, Commented Dec 2, 2011 at 17:09
thanks, I am trying to extract the part of code which is related to this question. I will post it soon. — Bahar S
– Bahar S, Commented Dec 2, 2011 at 17:11
@RoryMcCrossan I believe inline images are not cached. Although I'm not 100% sure, but I can't work out how they would be... — DaveRandom
– DaveRandom, Commented Dec 2, 2011 at 17:18

DaveRandom · Accepted Answer · 2011-12-02 17:22:52Z

5

I believe that what you want are inline images.

This works by putting the image data into the HTML, and can be manipulated from Javascript.

You end up with an image tag that looks something like this:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tL" width="16" height="14" alt="My alt text">

So what you need to do is set up an ajax call to a PHP script where you do something like this:

<?php

  // Your AJAX url is script.php?imagename=image.jpg

  $image = basename($_GET['imagename']);
  if (!file_exists($image)) {
    header('HTTP/1.1 404 Not Found');
    exit;
  }

  $contentType = 'image/jpeg'; // You will need to put the correct type for the file in the string
  $str = "data:$contentType;base64,".base64_encode(file_get_contents($image));
  echo $str;
  exit;

...and when you get the response in Javascript, do something like (for example):

 var newImg = document.createElement('img');
 newImg.src = xhr.responseText;
 newImg.alt = 'My alt text';
 document.getElementById('some_element_that_exists').appendChild(newImg);

Obviously the above code lacks the necessary error checking etc, but hopefully it will get you started.

If a passing pedant want's to jQuery-ify my Javascript, feel free.

edited Dec 2, 2011 at 17:22

answered Dec 2, 2011 at 17:17

DaveRandom

88.8k11 gold badges159 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bahar S Over a year ago

Thank you very much, and jQuery is almost the same as javascript in this case.

Julian · Accepted Answer · 2011-12-02 17:24:20Z

1

Adding to DaveRandom's response: i was thinking that if you have lots of files you might end up with a huge main page with lots of 'images code' which might not ever be used. You might want to fetch those 'images' by using ajax.

Notice that some versions of IE doesn't like those images though ..

answered Dec 2, 2011 at 17:24

Julian

3633 silver badges14 bronze badges

2 Comments

DaveRandom Over a year ago

Notice that some versions of IE doesn't like those images though - I stopped caring about ancient IE versions ages ago. If people don't want to use a sensible browser, they can't visit my sensible websites. It's a valid point, though.

Bahar S Over a year ago

Thanks, I don't care about IE as well and I do not have lots of images. Thanks.

Collectives™ on Stack Overflow

getting images from the server and display them

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related