开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何通过AJAX显示MySQL中的BLOB图像？

通过AJAX显示MySQL中的BLOB图像可以按照以下步骤进行：

首先，确保你已经建立了与MySQL数据库的连接，并且已经创建了包含BLOB图像的表。
在前端页面中，使用AJAX发送一个GET请求到后端服务器，请求获取BLOB图像的数据。
在后端服务器中，接收到AJAX请求后，通过MySQL连接查询数据库，获取BLOB图像的数据。
将获取到的BLOB图像数据进行编码，可以使用Base64编码方式。
将编码后的BLOB图像数据作为响应返回给前端页面。
在前端页面中，接收到后端服务器返回的BLOB图像数据后，使用JavaScript解码并显示图像。

以下是一个示例的代码：

前端页面（HTML和JavaScript）：

<!DOCTYPE html>
<html>
<head>
    <title>显示MySQL中的BLOB图像</title>
</head>
<body>
    <img id="image" src="" alt="BLOB图像">
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "getBlobImage.php", true);
        xhr.responseType = "text";
        xhr.onload = function() {
            if (xhr.status === 200) {
                var image = document.getElementById("image");
                image.src = "data:image/jpeg;base64," + xhr.responseText;
            }
        };
        xhr.send();
    </script>
</body>
</html>

后端服务器（PHP）：

<?php
// 建立与MySQL数据库的连接
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 查询BLOB图像数据
$sql = "SELECT image_data FROM blob_images WHERE id = 1";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    $imageData = $row["image_data"];

    // 编码BLOB图像数据为Base64格式
    $base64Image = base64_encode($imageData);

    // 返回编码后的BLOB图像数据
    echo $base64Image;
} else {
    echo "未找到BLOB图像数据";
}
$conn->close();
?>

请注意，以上示例代码仅供参考，具体实现可能需要根据你的具体情况进行调整。另外，推荐使用腾讯云的云数据库MySQL服务（https://cloud.tencent.com/product/cdb）来存储和管理MySQL数据库，以及腾讯云的云函数SCF（https://cloud.tencent.com/product/scf）来部署后端服务器代码。

相关搜索:UiImage swift 3中的Mysql blob图像显示如何在wordpress中通过ajax发布音频blob？从MySQL检索和显示blob图像如何在javascript中通过ajax调用传递BLOB值？如何从MySQL获取BLOB图像如何使用JSP在mysql中显示BLOB？如何使用PHP将blob显示为oracle中的图像如何在数据库中显示BLOB图像？使用PHP (PDO)在HTML图像标记中显示mysql数据库中的图像(blob 如何使用Python显示sqlite3中的BLOB对象(图像在ReactNative中显示从sqlite blob加载的图像如何显示BLOB的内容如何使用JS将blob对象显示为图像如何通过ajax显示json表示的错误？如何读取通过ajax发送到Java服务器的blob 显示来自ajax响应的图像如何通过ajax成功显示多张图片如何将BLOB图像转换为在Web页面中显示如何使用Express显示mysql中的图像如何从MySQL数据库中检索BLOB格式的图像并显示在html <img>标签中？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

DOMString、Document、FormData、Blob、File、ArrayBuffer （转）

我大学那会儿，一个称为Ajax的东西对前端行业造成了深远影响，不仅是JS语言，而包括前端地位、职位兴起以及工作分工等。抛开IE6浏览器不谈，其他浏览器的Ajax实际上都是借助XMLHttpRequest实现的。

03

如何预览要上传的图片？

A：昨天我们讨论了如何借助FormData通过Ajax上传文件。有同学留言谈到上传图片文件时，有时需要进行图片预览，这样能及时发现选择的图片文件是否正确，但是，不知道如何实现？

05

PHP编程实战

1.类是简单的用户定义类型。在面向对象的语言中，类就是创建类的对象或实例（功能副本）的模板；类描述了其所属的任何对象的共同特点；类的目的是封装对象的定义和行为，对最终用户隐藏它的具体实现，并使最每次用户按照文档说明和期望的方式来使用类对象。

04

快速上手小程序云开发

云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写，一键上传部署即可运行后端的代码。

05

聊聊JS的二进制家族：Blob、ArrayBuffer和Buffer

事实上，前端很少涉及对二进制数据的处理，但即便如此，我们偶尔总能在角落里看见它们的身影。

03

《你不知道的 Blob》番外篇

原文对 Blob 的知识点介绍得非常完整清晰，本文通过四个问题来总结本文核心知识：

00

关于 Blob

对于 Blob，前端开发中可能比较少遇到；数据库中可使用 Blob 概念，例如 Mysql 存储二进制数据的类型就是 Blob，也就是说图片可存储于数据库中，以二进制格式存储

01

【笔记】618- 读《你不知道的 Blob》笔记

Blob（Binary Large Object）表示二进制类型的大对象，通常是影像、声音或多媒体文件。MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。在 JavaScript 中 Blob 对象表示一个不可变、原始数据的类文件对象，它不一定非得是大量数据，也可以表示一个小型文件的内容。另外，JavaScript 中的 File 接口是基于 Blob，继承 Blob 的功能并将其扩展使其支持用户系统上的文件。

04

php+ajax实现文件切割上传功能示例

本文实例讲述了php+ajax实现文件切割上传功能。分享给大家供大家参考，具体如下：

05

高性能MySQL（第3版）阅读笔记

1、char(5) 和varchar(200) 存储'hello'的空间开销相同，使用短列有什么优势? 2、mysql会分配固定大小内存块保存内部值，尤其使用内存表临时表进行排序，操作时。因此最好只分

04

cropperjs图片裁剪及数据提交文件流互相转换详解

cropperjs的主要功能是图片裁剪，是一款前端常用的的图片裁剪工具，可根据相关api配置裁剪出符合自己业务需要的图片，具体使用如下：

01

H5上传图片

最近做产品小A的需求，设计到图片的上传问题，整理一下。 PC上传图片基本结构 form[enctype="multipart/form-data"] input[type="file"] 上传完毕后

用JS压缩上传的图片

现在网上的高清原图尺寸也有好几M甚至更大，而且现在手机像素高了拍出来的照片也特别大，所以有时候需要对用户上传图片时进行压缩处理。

02

H5上传图片

FileReader可以将File对象转化成base64，这样可以优先展示图片，然后处理上传操作。

01

MySQL从零开始：05 MySQL数据类型

距离上次更新 MySQL 从零开始系列，已经过去了十几天，时间隔得有点长，由于我选用的是 MySQL 的最新版本，网上的教程大多停留在 MySQL 5.x，所以要参阅一下官方文档，而文档是英文的，看起来比较耗时，希望大家可以理解，此系列一定会更新到底！

03

HTML5：File API

FileReader 是一种异步文件读取机制，用于读取File、Blob中的文件数据。

03

深度学习之主流数据库 | MySQL基础

这篇文章主要是讲一下常见的MySQL的安装，和基本操作。适合完全没有MySQL知识但是又急需一些MySQL知识的童靴作为快速入门使用。背景与安装背景不用多说了，大家都懂得。直接说在Ubuntu下面的安装吧。其实也是很简单。这里不搞复杂的源码安装，就依次输入下面非常简单的命令安装就够了。 sudo apt-get install mysql-server sudo apt isntall mysql-client sudo apt install libmysqlclient-dev 中间会有弹出设置

06

如何使用 jq 接收 blob 数据

如何使用 jq 接收 blob 数据 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌订阅目前 jq 用的人还是挺多的，在一些简单的促销 h5 页面，用 jq 去实现一些简单的功能还是比较方便的。本文展示如何用 JQ 去请求一个 blob 对象的 img 图片并渲染到页面上默认 jq 的 ajax 对象中的 dataType 无法设置返回资源为 blob 那么就需要手动设置，使其能够最终请求一个 blob 对象解决办法：使用原生 XMLHttpRequest var xhr = new XMLH

03

Mysql数据类型

我们要把现实世界中的各种信息转换成计算机能理解的东西，这些转换后的信息就形成了数据。例如，某人的出生日期是“1987年5月23日”，他的身高是170厘米，等等。数据不仅包括数字、字母、文字和其他特殊字符组成的文本形式的数据，而且还包括图形、图像、动画、影像、声音等多媒体数据。但使用最多、最基本的仍然是文本数据。

03

放弃General存放图像，VFP的BLOB存图存文件也是非常香

要在一个表单上显示存储在一个 Blob 字段中的图像，只要简单的把一个 Image 控件的 PictureVal 属性设置为这个 Blob 字段的内容就行了：

02

MySQL8 中文参考（八十八）

config.ini文件中的[mysqld]和[api]部分定义了用于访问集群数据的 MySQL 服务器（SQL 节点）和其他应用程序（API 节点）的行为。所示的参数都不是必需的。如果未提供计算机或主机名，则任何主机都可以使用此 SQL 或 API 节点。

01

你不知道的 Blob

如果你允许用户从你的网站上下载某些文件，那你可能会遇到 Blob 类型。为了实现上述的功能，你可以很容易从网上找到相关的示例，并根据实际需求进行适当的调整。对于部分开发者来说，在完成上述功能之后，他们并不会继续思考 Blob 是什么？

02

PHP使用反向Ajax技术实现在线客服系统详解

本文实例讲述了PHP使用反向Ajax技术实现在线客服系统。分享给大家供大家参考，具体如下：

04

数据库中存媒体文件的字段用什么类型？一文带你了解二进制大对象BLOB

在大数据环境中，BLOB 很常见，并且存储在关系或非关系数据库系统中，本文瑞哥带大家了解一下BLOB，让我们直接开始。

00

浅谈PHP与MySQL开发

前言这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程. 个人学习方法分享深入浅出后端开发(PHP篇) 深入浅出后端开发(MySQL篇) 本文阅读建议 1.一定要辩证的看待本文. 2.本文仅代表个人片面观点,如有不同观点,还往及时指出. 3.本文只阐述学习路线和学习当中的重点问题.需要读者自己使用百度进行拓展学习. 4.本文所表达观点并不是最终观点,还会更新,因为本人还在学习过程中,有什么遗漏或错误还望各

你知道这样的mock吗

mock数据用过的人一定不陌生，他的好处也是层出不穷，比如下面就是一段对mockjs很好的描述：

02

俄罗斯著名商业CMS DataLife Engine v16.0

DataLife Engine 是一个多功能的内容管理系统。得益于非常强大的新闻、文章和用户管理系统，DataLife Engine 主要设计用于在 Internet 上创建自己的大众媒体网站和博客。该引擎的各种基本功能（最初集成到其中）使 DataLife Engine 在网站创建方面进一步领先于其最接近的竞争对手。并且由于精确和复杂的核心结构可以最大限度地减少服务器资源的负载，DataLife Engine 能够轻松地处理具有大量出勤率的项目，从而将服务器负载保持在最低水平。定制设计的灵活性和易于定制和集成让您可以学习和了解模板的结构并尽快部署自己的网站，而无需任何额外的材料成本。先进的 AJAX 技术可以减少服务器上的流量和资源以及访问者的流量，更不用说访问者在网站上使用该技术的易用性了。由于对引擎的安全性、便利性和动态发展的日益关注，全球超过 90,000 个成功使用它的门户网站已经表示支持 DataLife Engine。对搜索引擎优化给予了极大的关注，它可以引导更多的访问者访问您的网站。

02

PHP大文件分割上传 PHP分片上传

upload_max_filesize = 2M //PHP最大能接受的文件大小 post_max_size = 8M //PHP能收到的最大POST值' memory_limit = 128M //内存上限 max_execution_time = 30 //最大执行时间

03

mysql 数据类型

一.数值类型 Mysql支持所有标准SQL中的数值类型，其中包括严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC)，以及近似数值数据类型(FLOAT,REAL,DOUBLE PRESISION),并在此基础上进行扩展。扩展后增加了TINYINT,MEDIUMINT,BIGINT这3种长度不同的整形，并增加了BIT类型，用来存放位数据。整数类型字节范围（有符号）范围（无符号）用途 TINYINT

04

Java mysql blob 数据读写操作

package com.lw.database; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.s

02

JS中Buffer数据详解

随着WebSocket、WebAudio、Ajax2等广泛应用，前端方面只要是处理大数据或者想提高数据处理性能，那一定是少不了 ArrayBuffer对象

03

HTML5

JS 里拖拽三事件， onmousedown onmousemove onmouseup 是实现交互性效果，根据鼠标的移动位置让标签元素联动

02

mysql存储long型数据_int数据类型

MySQL 的数值数据类型可以大致划分为两个类别，一个是整数，另一个是浮点数或小数。许多不同的子类型对这些类别中的每一个都是可用的，每个子类型支持不同大小的数据，并且 MySQL 允许我们指定数值字段中的值是否有正负之分或者用零填补。

03

base64编码图片数据存储服务器

我在刚开始接触base64编码图片数据时，就是把base64编码图片数据传到后台来解码生成图片。导致生成的图片无法打开，后来才发现其实传到后台的base64编码根本就不完整，导致解码出现问题，无法显示图片。所以，base64编码只能在前端处理。

02

mm-wiki开源干净的文档系统

当前市场上众多的优秀的文档系统百家争鸣，但是能够完全开源支持私有化部署的却屈指可数。目前个人了解到的体验较好的有MrDoc和mm-wiki。

04

如何在 Web 关闭页面时发送 Ajax 请求

有时候我们需要在用户离开页面的时候，做一些上报来记录用户行为。又或者是发送服务器ajax请求，通知服务器用户已经离开，比如直播间内的退房操作。

03

mysql密码字段类型_MySQL 字段类型

MySQL 的数值数据类型可以大致划分为两个类别，一个是整数，另一个是浮点数或小数。

02

Flutter 构建完整应用手册-图片顶

显示图像是大多数移动应用程序的基础。 Flutter提供Image小部件以显示不同类型的图像。

02

Blob

如果你允许用户从你的网站上下载某些文件，那你可能会遇到 Blob 类型。为了实现上述的功能，你可以很容易从网上找到相关的示例，并根据实际需求进行适当的调整。对于部分开发者来说，在完成上述功能之后，他们并不会继续思考 Blob 是什么？

04

Mysql入门(二)

MySQL 的数值数据类型可以大致划分为两个类别，一个是整数，另一个是浮点数或小数。许多不同的子类型对这些类别中的每一个都是可用的，每个子类型支持不同大小的数据，并且 MySQL 允许我们指定数值字段中的值是否有正负之分(UNSIGNED)或者用零填补(ZEROFILL)。

02

关于ajax无刷新上传和下载

这是一个没什么含量但是又用的比较多又不得不说的问题，其实真的不想说，因为没什么好说的。

02

第11章、数据类型

关键字 INT 是 INTEGER 的别名，关键字 DEC 和 FIXED 是 DECIMAL的别名。在 MyISAM/MEMORY/InnoDB和NDB表中支持BIT 数据类型，BIT 数据类型用于存储 bit 值。

02

XMLHttpRequest使用指南大全

我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。

03

2020年度总结了这 50 道 MySQL 高频面试题！

Mysql数据库软件是一个客户端或服务器系统，其中包括：支持各种客户端程序和库的多线程SQL服务器、不同的后端、广泛的应用程序编程接口和管理工具。

02

FormData 对象的使用

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

02

你真的会使用XMLHttpRequest吗？

我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。

03

用JavaScript把CSV与Excel转为Json[每日前端夜话0xC5]

有两个 JavaScript 插件可用于读取和处理 CSV 和 Excel 文件，之后仅对自己的脚本进行编码即可。

04

JQuery-命令速查-CheatSheet

http://stackoverflow.com/questions/31379409/form-submission-causing-maximum-call-stack-size-exceeded

03

MySQL性能优化(二)：选择优化的数据类型

良好的设计是高性能的基石，应该根据系统的实际业务需求、使用场景进行设计、优化、再调整，在这其中往往需要权衡各种因素，例如，数据库表究竟如何划分、字段如何选择合适的数据类型等等问题。

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭