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.

Answer 1

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.

Answer 2

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 ..