[英]Retrieve MySQL Image Blob in HTML
for my web app Im using C# WebService, JavaScript, jQuery and JavaScript I upload an image into a table with this structure: 对于我的Web应用程序Im使用C#WebService,JavaScript,jQuery和JavaScript,我将图像上传到具有以下结构的表中:
Id | FileName | ContentType | Content
1 |Tulips.jpg| image/jpeg | (Binary/Image)
I want to show this information in a HTML page, at the moment my HTML show this information: 我想在HTML页面中显示此信息,此刻我的HTML显示此信息:
2 | Tulips.jpg | image/jpeg | System.Byte[]
I want to show the image instead of System.Byte[], how can I do that? 我想显示图像而不是System.Byte [],该怎么办? This is all my code: 这是我的全部代码:
C# class C#类
public class Imagenes { public Imagenes() { } 公共类Imagenes {public Imagenes(){}
public Imagenes(int id, string fileName, string type, string content)
{
Id = id;
FileName = fileName;
Type = type;
Content = content;
}
public int Id { get; set; }
public string FileName { get; set; }
public string Type { get; set; }
public string Content { get; set; }
}
DataBase Class 数据库类
Here is no problem is just a Select * from. 这里没有问题,只是Select * from。
WebMethod 的WebMethod
[WebMethod]
public string Image(int id)
{
DataTable dt = new DataTable();
dt = conn.consultImg("tbl_images", id);
Imagenes img;
List<Imagenes> list = new List<Imagenes>();
for (int i = 0; i < dt.Rows.Count; i++)
{
img = new Imagenes();
img.Id = Convert.ToInt32(dt.Rows[i]["Id"]);
img.FileName = dt.Rows[i]["FileName"].ToString();
img.Type = dt.Rows[i]["ContentType"].ToString();
img.Content = dt.Rows[i]["Content"].ToString();
list.Add(img);
img = null;
}
JavaScriptSerializer js = new JavaScriptSerializer();
string lines = js.Serialize(list);
return lines;
}
And JavaScript code: 和JavaScript代码:
var id = $('#Id').val();
$.ajax({
type: "POST",
url: "ws_MyWebService.asmx/Image",
data: '{"id":' + id + '}',
dataType: 'json',
contentType: 'application/json',
timeout: 60000,
error: function (xhr) {
},
success: function (data) {
var aRC = JSON.parse(data.d);
var lines = "";
for (var i = 0; i < aRC.length; i++) {
var id = aRC[i].Id;
var fname = aRC[i].FileName;
var type = aRC[i].Type;
var content = aRC[i].Content;
lines += '<p>' + id + '</p>';
lines += '<p>' + fname + '</p>';
lines += '<p>' + type + '</p>';
lines += '<p>' + content + '</p>';
}
$('#MyDiv').html(lines);
You need to make two changes on your original code: 您需要对原始代码进行两项更改:
WebMethod 的WebMethod
//Change this line
img.Content = dt.Rows[i]["Content"].ToString();
//Use this instead
img.Content = Convert.ToBase64String(Serialize(dt.Rows[i]["Content"]));
Extra Method 额外方法
public static byte[] Serialize(object obj)
{
var binaryFormatter = new BinaryFormatter();
var ms = new MemoryStream();
binaryFormatter.Serialize(ms, obj);
return ms.ToArray();
}
JavaScript JavaScript的
//Replace this line
lines += '<p>' + content + '</p>';
//With this one
line += '<p><img src="data:image/jpeg;base64,' + content + '" /></p>';
You can set the MaxJsonLength property on your Web.config
: 您可以在Web.config
上设置MaxJsonLength属性:
<configuration>
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="50000000"/>
</webServices>
</scripting>
</system.web.extensions>
</configuration>
You could return a base64 encoded string representation of the image. 您可以返回图像的base64编码的字符串表示形式。
Using the Convert.ToBase64String Method . 使用Convert.ToBase64String方法 。
Where you output the image you would then have: 在输出图像的位置,您将拥有:
<img src="data:image/jpeg;base64, <!-- base64 string here -->" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.