使用PHP和JS在div中显示图像

Question

免责声明：这是作业。我不是要求明确的代码。我只想要足够的信息，以便我可以理解手头的任务并学习相关部分。

我正在进行一项任务，要求我通过表单接受名称和图片，将两者放入数据库，然后在表单下方显示数据库中的所有名称。名称应该是可点击的，点击后，在名称下方的div中显示各自的图片。

我已经足够将名称和图像存储在数据库中了（我知道，将图像存储在数据库中是不好的，但它是分配的一部分。）我必须完成的最后一部分是链接和图像显示

我决定以一种相当鲁莽的方式给每个名字赋予它自己的div：

for ($i = 0; $i < $nrows; $i++) {
    $name = htmlspecialchars(mysql_result($results, $i, "first_name")). " " .htmlspecialchars(mysql_result($results, $i, "last_name"));
    echo "<div id='".$name."'>";
    echo $name;
    echo "</div>";
}

所以这就像一个表一样，除了每个div都有一个唯一的ID（这个人的名字，虽然我可以把它改成一个数字ID。）我觉得给每个div一个on-click函数是相当基本的，基于它的唯一ID，但我不确定我是否应该在循环范围内或外部...

此外，我不确定如何设置该点击功能来选择特定名称的图像。每个图像都存储为LONGBLOB，因此需要在显示之前将其编码为图像形式。我知道base64_encode应该适用于此，但我似乎无法将它放在我的脑海中。

如果您需要更多我的代码，请告诉我 - 我很乐意提供。否则，感谢您的时间和帮助。

编辑＃1（2013年2月18日上午11:44）：

$('#$name').click(function() {
    $("#image-div").html("<img src='data:image/jpeg;base64,'.base64_encode(mysql_result($results, $i, 'photo')).'>");
});

Answer 1

1. 为div提供一个类，然后您可以使用jQuery.on通过类选择器分配您的点击处理程序
2. 要检索图像，您需要创建控制器，以使用正确的内容类型标头将图像向下推送到客户端;这会使您的图片代码看起来像：<img src="image.php?name=theimagename" />

<强>更新：

你不想把id直接放在js中...你想使用某种属性，你可以从处理程序获得。例如：

<div id="theimagename" data-image-id="1">
</div>

然后从处理程序中获取data-image-id的值并将其发送到php。

Answer 2

对于每个<div id="name">，还要添加onclick处理程序，如下所示：

<div onclick="getImage(this.id)" id="name">

然后getImage()函数可以具有以下内容：

function getImage(name){
  console.log(id)
  //Now you have the name of the image you need
}