如何用 jquery 加载图片？答案

【问题标题】：How can i load a picture with jquery?如何用 jquery 加载图片？
【发布时间】：2009-05-05 09:47:14
【问题描述】：

我目前正在研究一个使用 php 将图表生成为图片的类。我想用jquery动态加载这些图片。我怎样才能做到这一点？？我不会有一个真正的图片文件，只有当我用 ajax 调用它时文件的内容......而且我不能简单地将 php 脚本定义为 src，因为我需要将 Post 参数传递给图片......

编辑：

好吧..我想我必须进一步解释一下...

这里是html代码：

<div>
<img id="image" />
</div>
<input type="button" onclick="loadPicture();" />

当按钮被按下时，一些数据应该被发送到生成图片的 php 脚本。回调函数或类似的东西现在应该将图片发布到 img- 元素中。简单地将图片发布到 img 标签中是行不通的。以下代码可以工作，但我如何添加 POST 参数？

<img src="<scriptname>.php" />

【问题讨论】：

“post params”是什么意思？正如我在下面所说的，jQuery .post 方法可以接受参数并将结果作为回调返回。在这里您可以找到更多相关信息：docs.jquery.com/Ajax/jQuery.post
我的意思是在帖子标题中发送的参数。我知道 $.post 函数，但我真的不知道响应应该是什么样子。我无法传递图像路径，因为图像不存在，我无法传递图像本身，因为我无法显示它（我不知道如何显示它）...

标签： php javascript jquery ajax image

【解决方案1】：

Http POST 请求并不意味着返回资源。为什么不使用 GET 请求？执行此操作的“REST”方法是使用 POST 请求创建图像，然后使用 GET 请求加载它。您需要为您的资源定义一个 URL 映射。

【讨论】：

使用 GET 的问题是，在 IE 中 URL 的长度是有限的......但我可能有很多数据需要处理才能创建图像......所以我定义达到 IE 的最大长度（我认为是 2048 个字符...）
使用冗长的 GET 请求也不是一个好主意。只需分两步即可。使用 POST 请求“创建”图像。返回一个唯一标识符作为结果。然后使用此标识符执行 GET。您可以将图像保存在临时文件中，也可以将 POST 参数保存在 http 会话中。

【解决方案2】：

没有人！在我看来，你基本上有 3 个选项。

方法一——内嵌图片

照 Brayn 说的做，但 data 应该是 base64 encoding of your image。

$("#div").html(data); // instead of this
$('#image').attr('src','data:image/gif;base64,'+data); // try something like this

但我不喜欢内联图像或传递帖子数据的想法。对于大图像，Base64 可能也会有点大。

方法二——保存图片

你可以像之前一样$.post数据，然后保存图片，并返回图片的URL。

方法 3 - 使用 GET

修改您的图像生成脚本以接受GET 数据。如果您要传递大量数据，请尝试以某种方式对其进行压缩，或者也许您可以使用SESSION 变量。

【讨论】：

【解决方案3】：

我不太确定我是否按照您所说的正确，但是您可以使用 $.post() 方法，该方法将通过其回调返回您需要的任何内容。像这样的：

$.post("file.php",{param: val},function(data){
    $("#div").html(data);
})

如果您能进一步解释，也许我们会更好地理解。希望这会有所帮助。

【讨论】：

如果您必须发送 POST 参数（即，如果 GET 在您的情况下不起作用），这是您问题的最合理答案。在此示例中，“数据”将是 HTML 图像标记，具有 PHP 返回的正确图像 src。如果您需要有关其工作原理的更多信息，请询问，我将详细说明 Brayn 发布的内容（或者如果他愿意，他可以......）。

【解决方案4】：

是否真的需要使用 AJAX / jQuery？或者你只是因为它很酷而把它放进去？

我会这样做：

if (isset($_POST['createImage'])){
    // This means that the button was clicked
    // Generate your image, and then display it:
}

// Regardless, you would now show your form
// That way if values were to be changed, the graphic can be recalculated.

通过这种方式，您可以获得所需的输出（图形加载取决于表单输出）并单击即可生成该输出。

【讨论】：