[英]how to send png image from server to display in browser via ajax
我一直很难完成一项非常正常的任务。 我将图像上传并保存到我的Web服务器并将路径保存到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??
}
});
您可以向禁止访问该图像的用户显示默认的“禁止访问”图像:
<?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));
并使用数据URI方案将响应放在img
标记中
var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>';
鉴于Base64编码数据明显大于原始数据,您可以使用库发送原始数据并在浏览器中对其进行编码。
这对你有意义吗?
而不是通过AJAX获取get_image.php,为什么不使用:
<img src="get_image.php" />
这几乎是一回事。 您可以使用AJAX动态更新<img>
。
你不能通过ajax来做到这一点。
你可以这样做:
<img src="script.php?image=image_name" />
然后使用JavaScript更改查询字符串。
您实际上可以在浏览器中的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
函数。 看看这个问题 - 在那里给出了功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.