Question

我有问题。如果你能引导我，我将不胜感激。我在服务器上有一些图像。在我的客户端代码（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，它们实际位于我的网页上的服务器上。我想更改它，以便通过我的网页从服务器获取图像然后显示。我在页面加载时从服务器获取图像，原因是我不希望在此之后有任何客户端 - 服务器流量。我提到我不希望将图像保存在客户端计算机上，因为出于安全考虑，我认为不允许（未经用户许可）。但是，浏览器的缓存对我来说没问题。感谢。

Answer 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-ify我的Javascript，请随意。

Answer 2

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

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

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

2 个答案: