我一直很难完成必须完成的一项非常正常的任务。我将图像上传并保存到Web服务器,并将该文件的路径保存在MySQL数据库中(这一切正常)。不起作用的是从服务器获取图像文件,并通过ajax在页面上显示它。
最初,我只是尝试从数据库中检索路径,并src使用图像的路径更新标签的属性。这是可行的,但是所有映像都位于服务器上的文件夹中,所有人都可以访问它们。不是很好。我只能让这些用户访问属于某些用户的图片。
src
为了限制对这些照片的访问,我在该文件夹上添加了一个Apache指令,该指令成功地限制了访问。然后,问题变成了我无法通过将src属性设置为该路径来在浏览器中显示图像。见我的帖子:https : //serverfault.com/questions/425974/apache-deny-access-to-images-folder-but- still-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));
并img使用数据URI方案将响应放入标签中
img
var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>';
假设Base64编码的数据明显大于原始数据,则可以发送原始数据并使用library在浏览器中对其进行编码。
这对您有意义吗?