我目前正在尝试查看存储在数据库中的BLOB格式的图像,为此,我创建了一个FileContentResult类型的控制器操作,其代码如下:
public FileContentResult ImageFile(string imageId)
{
var client = new WcfTestClient();
DataTable table = client.GetImageData(imageId);
var image = ConvertToBytes(table);
byte[] bytes;
bytes = image[0].Values.ElementAt(0);
return File(bytes, @"image/png");
}
它从数据库中获取正确的图像数据,ConvertToBytes() 也正常工作,但由于某种原因,在将图像返回到视图后,它会跳回到顶部并再次运行。
我正在使用 Ajax 从视图调用该方法,如下所示:
$.ajax({
url: "/Home/ImageFile",
type: "GET",
data: { "imageId": imageId },
success: function (data) {
var image = document.createElement('img');
image.src = "/Home/ImageFile?id=" + imageId;
image.width = 100;
image.height = 100;
div.appendChild(image);
}
});
有人知道导致我的问题的原因吗?
更新
好的,现在在被告知是Ajax引起了问题后,我试图像这样向我的控制器操作发送参数:
var images = JSON.parse(window.localStorage.getItem("JsonImages"));
var div = document.getElementById('imgOutput');
for (var i = 0; i < images.length; i++) {
var imageId = images[i].pi_Id;
var imgId = JSON.parse('{"imageId":' + imageId + '}');
var img = document.createElement('img');
img.src = "/Home/ImageFile?id=" + imgId;
img.width = 100;
img.height = 100;
div.appendChild(img);
}
很遗憾,这并不起作用。那么有没有办法在不运行两次的情况下向ImageFile()发送参数呢?我是否忽略了一些基本的东西?
更新2
最后我让它正常工作了!现在它看起来是这样的:
var images = JSON.parse(window.localStorage.getItem("JsonImages"));
var div = document.getElementById('imgOutput');
var createImage = function (src) {
var img = document.createElement('img');
img.src = src;
img.height = 100;
img.width = 100;
return img;
}
for (var i = 0; i < images.length; i++) {
var imageId = images[i].pi_Id;
var imageSrc = "/Home/ImageFile?imageId=" + imageId;
div.appendChild(createImage(imageSrc));
}
我只需要将源参数从 id 更改为 imageId (显然)。感谢您的所有帮助!