javascript - 使用 MVC 5 将图像发送到客户端并在新窗口或选项卡中打开

Question

很简单的问题，但我有点困惑。在我的应用程序中，当用户单击图像的缩略图时，缩略图的 ID 将通过 AJAX 发送到此 Controller 操作:

[HttpPost]
public ActionResult GetHiResImage(string thumbnailID)
{
    Guid id = new Guid(thumbnailID);
    try
    {
        using (var db = new ImagesDbContext())
        {
            var image = db.Images.Where(x => x.ImageID == id).Select(x => x).Single();
            return File(image.ImageData, image.ImageMimeType);
        }
    }
    catch (Exception e) { }
    return Json("An error occurred while trying to retrieve the image from the database.");
}

使用此代码，客户端似乎收到了图像，但没有任何反应。

我想将全尺寸图像返回给客户端 - 无需重定向或刷新页面 - 但我不知道如何执行此操作。理想情况下，我希望图像出现在新窗口或选项卡中，并且我试图找出 FileResult 的类型(例如 FileResult、 FileStreamResult 或 FileContentResult)将用于执行此操作。

更大的问题之一是图像没有保存在服务器上的任何目录中，所以我不能简单地返回一个FilePath给客户端。

我尝试使用return File和return FileContentResult但无济于事。我还认为我可以将包含图像的 Base64String 表示形式的字符串返回给客户端并将其显示在模式对话框中，但这并不理想，因为图像的大小可能超过模式的长度/宽度.

Answer 1

这不适合 AJAX。尽管从技术上讲，您可以将图像数据作为 AJAX 响应返回，但您必须对其执行一些操作:即，使用 JavaScript 中的文件 API 在页面上创建图像。最后一部分是关键，也是为什么 AJAX 特别不适合您想要实现的目标:您无法使用该图像打开新选项卡或窗口。您只能在当前页面使用它。

好消息是，您实际上使这件事变得比实际需要的更加困难。只需在缩略图周围创建一个标准 HTML 链接，并将 href 设置为该操作的 URL，并使用图像的 ID。然后将属性 target="_blank" 添加到链接，您将获得一个包含全尺寸图像的新选项卡/窗口。

<a href="@Url.Action("GetHiResImage", "YourController", new { thumbnailID = yourID })" target="_blank>
    <img ... />
</a>

更改您的操作以返回具有正确 mime 类型的图像数据并完成。