如何在jquerymobile模板上显示存储在MySql数据库中的blob类型图像

时间:2013-08-19 06:52:06

标签: php jquery json html5 blob

我有一个场景,应该在我的Jquerymobile模板中显示图像。这些图像来自MySQL数据库。图像类型是blob类型,我使用PHP来检索我的数据 - 如下所示

    <?php
include 'configure.php';
$qr = "SELECT * FROM food_beverage";
$res= mysql_query($qr);
$i=0;
while($row = mysql_fetch_array($res))
{
$restau_arr[$i]["fb_sno"] = $row["fb_sno"];
$restau_arr[$i]["fb_name"] = $row["fb_name"];
$restau_arr[$i]["fb_type"] = $row["fb_type"];
$restau_arr[$i]["fb_location"] = $row["fb_location"];
$restau_arr[$i]["fb_img"]= $row["fb_img"];
$restau_arr[$i]["fb_phno"]= $row["fb_phno"];
$restau_arr[$i]["fb_email"]= $row["fb_email"];
$i++;
}
 header('Content-type: application/json'); 
  echo json_encode($restau_arr);
?>

数据库中的值存储在一个数组中,并且正在转换为JSON格式,以便我可以使用以下jquery行调用它们 -

var url = "retrieve_all.php";   
     $.getJSON(url, function(json) {
                 .......
                  .......
                   ....... }

在此功能收到值后,使用 -

将它们附加到相应的HTML字段
 $.each(json, function(i,v) {                                     
                    var restauName = v.fb_name;
                    var restauLoc = v.fb_location;
                    var restauNum = v.fb_phno;
                                    var restauImg = v.fb_img;
                    $("#restauName").html(restauName);
                    $("#restauLoc").html(restauLoc);
                    $("#restauNum").html(restauNum);
                    $("#restauImg").html(restauImg);
                    });

我能够理解图像不应该被视为JSON格式。但是如何处理呢? 我应该在PHP中做些什么才能让我的blob图像显示在我的页面/屏幕上?

方法是否正确?

为此,我checked here在开始时寻求帮助,但我的情况似乎有所不同。

1 个答案:

答案 0 :(得分:0)

这是为您提供解决方案的更多注释,而不是“点击此处查看结果”;但试试这个:

  • 除了图像,你还有一个有效的解决方案吗?
  • 图片大吗?
    • 如果它们是图标,我会将图像数据嵌入到相同的JSON响应中(参见结束)
    • 如果它们是照片,我会返回一个URL,并有第二个HTTP请求来下载它们。您可以附加&lt; img&gt;通过AJAX响应处理程序的文档元素。
    • 图像服务脚本将获取ID,验证它,然后返回DB字段值。
    • 您需要确保二进制数据没有字符集转换,否则图像将被破坏。

将所有内容嵌入到单个响应中

  • rfc2397
  • 使图像JSON项看起来像:
    • data:image/jpeg;base64,base_64_encoded_jpeg_goes_here
    • 显然,您可以更改mime编码以满足您的需求。
  • 添加一些JS来获取此字符串,附加一个&lt; img&gt; element,将该数据作为src属性。

我有一个JSON to img elements的粗略演示(带有外部文件)。