从服务器获取图像并显示它们答案

【问题标题】：getting images from the server and display them从服务器获取图像并显示它们
【发布时间】：2011-12-02 17:05:18
【问题描述】：

我有问题。如果您能指导我，我将不胜感激。我有一些图像位于服务器上。在我的客户端代码（jQuery）中，我需要从服务器（通过 AJAX-php）获取图像（实际图像，而不是它们在服务器上的链接）并在我的页面上显示图像。当我收到图像时，我不希望它们保存在客户端的硬盘上；我只是暂时需要它们（也许浏览器可以在短时间内为我保留它们）。你能帮我么？我不知道如何用 jQuery/php/Ajax 和 JSON 来实现它。

我当前的代码是：

<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代码（serverSide.php）：

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

此代码显示 01.bmp、02.bmp 和 03.bmp，它们物理上位于我的网页上的服务器上。我想更改它，以便我的网页从服务器获取图像然后显示。加载页面时我从服务器获取图像，原因是我不想在那之后有任何客户端-服务器流量。我提到我不希望将图像保存在客户端计算机上，因为出于安全目的，我认为它是不允许的（未经用户许可）。但是，浏览器的缓存对我来说没问题。谢谢。

【问题讨论】：

我不确定您所说的 I do not want them to be saved on the client’s hard disk 是什么意思。 Web 浏览器访问的任何内容都将保存到用户硬盘上的缓存中，这是无法阻止的。
显示您目前拥有的代码、存储图像的服务器上的目录是什么等。您的问题目前不完整。
即使您暂时得到图片，你也得到了它们 - 意味着它们实际上在某个硬盘上！除非只是确定，否则您可以只使用常规的标记。你的问题真的不清楚，你可能是别的意思。这次给我们一些代码或解释一下正确！！
谢谢，我正在尝试提取与此问题相关的部分代码。我会尽快发布。
@RoryMcCrossan 我相信内联图像不会被缓存。虽然我不是 100% 确定，但我不知道他们会怎样......

标签： php jquery ajax image

【解决方案1】：

我相信你想要的是inline images。

这是通过将图像数据放入 HTML 中来实现的，并且可以通过 Javascript 进行操作。

你最终会得到一个看起来像这样的图像标签：

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

所以您需要做的是设置一个对 PHP 脚本的 ajax 调用，您可以在其中执行以下操作：

<?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 中获得响应时，请执行以下操作（例如）：

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

显然，上面的代码缺少必要的错误检查等，但希望它能帮助您入门。

如果路过的学究想要 jQuery 化我的 Javascript，请随意。

【讨论】：

非常感谢，本例中jQuery和javascript差不多。

【解决方案2】：

添加到 DaveRandom 的回复：我在想，如果您有很多文件，您最终可能会得到一个巨大的主页，其中包含许多可能永远不会使用的“图像代码”。您可能希望使用 ajax 获取这些“图像”。

请注意，某些版本的 IE 虽然不喜欢这些图像..

【讨论】：

Notice that some versions of IE doesn't like those images though - 我很久以前就不再关心古老的 IE 版本了。如果人们不想使用智能浏览器，他们就无法访问我的智能网站。不过，这是一个有效的观点。
谢谢，我也不关心 IE，也没有很多图片。谢谢。