我当前正在尝试查看以 BLOB 形式存储在数据库中的图像,为此我创建了一个 FileContentResult 类型的 Controller 操作,如下所示:
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() 也能正常工作,但由于某种原因,在将图像返回到 View 后,它会跳回顶部并再次运行。
我使用 Ajax 从我的 View 中调用该方法,如下所示:
$.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 搞砸了之后,我尝试向我的 Controller 操作发送一个参数,如下所示:
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(废话)。感谢您的帮助!
最佳答案
问题是,您首先向 ImageFile
Controller 操作发出 AJAX 请求,然后,当它成功返回结果时,您创建一个引用同一路由的 DOM 元素,因此浏览器发出尝试创建图像标记的另一个请求。
从表面上看,您根本不需要 AJAX 调用。如果您只是使用操作路径作为 src
创建图像标记,它应该可以工作。从 AJAX 请求中提取您的 success
回调并单独使用它。
或者,如果您没有做任何特别动态的事情,您可以直接在图像 src
标记中使用路由,而根本不使用 Javascript。例如,如果您使用 Razor:
<image src="@(String.Format("/Home/ImageFile?id={0}", Model.MyImage))"
height="100" width="100" />
如果它需要动态且基于 Javascript,您可以删除 AJAX,因为您不需要它:
function createImage(src, width, height) {
var img = document.createElement('img');
img.src = src;
img.height = height;
img.width = width;
return img;
}
var someId = /* Whatever your ID is */;
var imgSrc = "/Home/ImageFile?id=" + someId;
div.appendChild(createImage(imgSrc, 100, 100));
关于jquery - ASP.NET MVC 4 FileContentResult 运行两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16353435/