来自服务器的图像，并显示它们 [英] getting images from the server and display them

问题描述

我有一个问题。我想AP preciate如果你能指导我。 我有位于服务器上的一些图像。在我的客户code（jQuery的）我需要从服务器（通过AJAX，PHP）获得的图像（实际图像，而不是他们在服务器上的链接），并显示在我的网页图像。当我收到的图片，我不希望他们被保存在客户端的硬盘;我只需要他们暂时（也许浏览器可以让他们对我来说这短短的时间）。你能帮帮我吗？我不知道如何使用jQuery / PHP / Ajax和JSON可能实现它。

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.

我目前的code是：

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

和PHP的code（serverSide.php）：

and the php Code (serverSide.php):

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

这code显示01.bmp，02.bmp和03.bmp这是物理上位于服务器，在我的网页。 我想改变它，这样的图像通过我的网页将从服务器，然后显示出来。 我从当页面加载服务器映像，其原因是，我不希望有后，任何客户端 - 服务器的流量。 我说过，我不希望图像保存客户机上，因为我认为这是不允许的，因为安全起见（没有用户的许可）。然而，浏览器的缓存是确定适合我。 谢谢你。

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 believe that what you want are inline images.

此工作通过将图像数据到HTML，并且可以从Javascript被操纵

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

所以，你需要做的是建立一个Ajax调用，你做这样的事情一个PHP脚本：

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;

...当你在Javascript中的反应，像做（例如）：

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

显然，上述code缺乏必要的错误检查等，但希望这将让你开始。

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

如果路过的学究想的到的jQuery IFY我的javascript，觉得自由。

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

这篇关于来自服务器的图像，并显示它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！