带有 Ajax 的 jQuery FancyBox

Posted 2023-05-09

【中文标题】带有 Ajax 的 jQuery FancyBox

【英文标题】：jQuery FancyBox with Ajax

【发布时间】：2015-09-29 20:15:00

【问题描述】：

我在 *** 上查看了许多网站和许多页面，但它们都没有解决我的问题。简单地说，我有一个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   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 );

【参考方案1】：

最好试试

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

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

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

【参考方案2】：

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

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

【讨论】：

感谢回复，图片存储为byte[]。我也看看你提到的页面，但我真的很困惑控制器中的方法和 Javascript 方法。另一方面，您的示例不使用 Ajax，是否可以在不回发的情况下检索图像？如果我们不使用Ajax，我认为这似乎是不可能的。那么，您能否检查一下并澄清我应该遵循的内容？ :(

我不确定您使用的是哪种服务器端语言，但如果您使用它返回正确的标题和常规 jpeg 或 png 格式的图像，我的方法将起作用。如果您不依赖浏览器转换图像，您应该可以获得更一致的跨浏览器结果