12

我一直很难完成一项非常正常的任务。我将图像上传并保存到我的网络服务器，并将文件的路径保存在 MySQL 数据库中（这一切正常）。不起作用的是从服务器获取图像文件并通过 ajax 将其显示在页面上。

最初我试图从数据库中检索路径，并src使用图像路径更新标签的属性。这是可行的，但是这样所有的图像都在服务器上的一个文件夹中，人们都可以访问它们。不是很好。我只能让这些用户可以访问属于某些用户的图片。

为了限制对这些照片的访问，我在该文件夹上添加了一个 Apache 指令，它成功地限制了访问。然后问题变成了我无法通过将src属性设置为该路径来在浏览器中显示图像。请参阅我的帖子：https ://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

最后我了解到我必须使用 PHP 直接从服务器读取图像数据并将这些数据发送到浏览器。我使用了file_get_contents()函数，该函数用于将服务器上的图像文件 (PNG) 转换为字符串。我在 ajax 调用中将此字符串返回给浏​​览器。我无法得到的是： 如何使用 JavaScript 将此字符串转换回图像？

请参阅此代码：

$.ajax({
    url: get_image.php,
    success: function(image_string){
        //how to load this image string from file_get_contents to the browser??
    }
});
4

4 回答 4

17

您可以向被禁止访问图像的用户显示默认的“禁止访问”图像：

<?php

$file = $_GET['file']; // don't forget to sanitize this!

header('Content-type: image/png');
if (user_is_allowed_to_access($file)) {
    readfile($file);
}
else {
    readfile('some/default/file.png');
}

而且，在客户端：

<img src="script.php?file=path/to/file.png" />

或者，如果您真的想要或需要通过 Ajax 发送数据，您可以对其进行 Base64 编码：

<?php

echo base64_encode(file_get_contents($file));

并使用Data URI 方案将响应放在img标签中

var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>';

鉴于 Base64 编码的数据比原始数据大得多，您可以发送原始数据并在浏览器中使用library对其进行编码。

这对你有意义吗？

于 2012-09-10T17:03:27.557 回答
4

与其通过 AJAX 获取 get_image.php，不如直接使用：

<img src="get_image.php" />

这实际上是一样的。您可以只使用 AJAX 来<img>动态更新。

于 2012-09-10T16:58:39.427 回答
2

你不能通过ajax来做到这一点。

你可以这样做：

<img src="script.php?image=image_name" />

然后使用 JavaScript 更改查询字符串。

于 2012-09-10T16:56:43.020 回答
1

您实际上可以img在浏览器的标签内嵌入图像数据，因此 ajax 代码可能如下所示：

$.ajax({
    url: get_image.php,
    success: function(image_string){
        $(document.body).append("<img src='data:image/gif;base64," + base64_encode(image_string) + "' />);
    }
});

请注意，您将需要编写此base64_encode函数。看看这个问题- 那里给出了函数。

于 2012-09-10T17:01:16.603 回答