jQuery FancyBox with Ajax

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

查看：

<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 + '" />'); 
     }  
    }); 
}

控制器：有关于在控制器的方法没有什么问题，它返回正确的图像。

[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 }); 
}

来源

2015-07-10 Clint Eastwood

这应该有效。看起来像图像存储为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+'" />'); 
}

来源

2015-07-11 00:59:19

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

我不确定你使用的是什么服务器端语言，但是如果你有它，它会以正常的jpeg或png格式返回正确的头文件和图像，我的方法可以工作。你不依赖浏览器来转换图像 –

更好

尝试

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

我不知道为什么你想，当你不显示任何代码，你已经打开了它加载的fancybox容器内的内容。无论如何，最好用新内容推出新的fancybox（来自ajax响应）

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

来源

2015-07-11 19:49:33 JFK

jQuery FancyBox with Ajax

回答

相关问题