带有 Ajax 的 jQuery FancyBox

Question

我在 Stackoverflow 上查看了许多网站和许多页面，但它们都没有解决我的问题。简单地说，我有一个hyperlink，我想通过Ajax 调用从数据库中检索图像，然后将其显示在FancyBox 弹出窗口中。我还尝试了Javascript 和Controller 操作方法的许多不同组合，但没有管理，因此正确显示下载的文件。您能否看看我的代码并给出一个包含View 和Controller 中所有必要方法的工作示例？另一方面，最好为其他文件类型（即 excel、pdf）打开一个对话框，同时为图像文件打开 FancyBox。

查看：

<a onclick="downloadFile(@Model.ID);">@Model.FileName</a>


function downloadFile(id) {     
    $.ajax({
        url: "/Issue/RenderImage?ID=" + id,
        async: true,
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            $('#fancybox-inner').html('<img height="200" width="250" src="data:image/png;base64,' + response + '" />');
        }       
    });
}

Controller：Controller中的方法没有问题，可以正常返回图片。

[HttpPost]
public virtual JsonResult RenderImage(int id)
{
    string str = System.Convert.ToBase64String(repository.FileAttachments.FirstOrDefault(p => p.ID == id).FileData, 0, repository.FileAttachments.FirstOrDefault(p => p.ID == id).FileData.Length);
    return Json(new { Image = str, JsonRequestBehavior.AllowGet });
}

Answer 1

最好试试

success: function (response) {
    $.fancybox({
        content: '<img height="200" width="250" src="data:image/png;base64,' + response + '" />',
        type: "html"
    });
}  

我想知道为什么您尝试在fancybox 容器中加载内容，而您却没有在已经打开它的地方显示任何代码。无论如何，最好用新内容（来自 ajax 响应）启动一个新的 fancybox

当然，如果 ajax 调用为您的 <img> 标记返回正确响应，这将起作用，但我无法确定。

Answer 2

这应该可行。看起来图像存储为 JSON。如果是这样，我认为您应该在将其发送到浏览器之前将其转换回 Base64。见http://mobile.cs.fsu.edu/converting-images-to-json-objects/

function downloadFile(id) {
    $('#fancybox-inner').html('<img height="200" width="250" src="/Issue/RenderImage?ID='+id+'" />');
}