问题描述
我在 Stackoverflow 上查看了许多网站和许多页面,但没有一个解决了我的问题.简单地说,我有一个 超链接
,我想通过 Ajax
调用从数据库中检索图像,然后在 FancyBox
弹出窗口中显示它.我还尝试了 Javascript
和 Controller
操作方法的许多不同组合,但没有设法正确显示下载的文件.您能否看看我的代码并给出一个包含 View
和 Controller
中所有必要方法的工作示例?另一方面,打开图像文件的 FancyBox
时,最好为其他文件类型(即 excel、pdf)打开一个对话框.
I have look at many web sites and many pages on Stackoverflow, but none of them has solved my problem yet. Simply, I have a hyperlink
and I want to retrieve an image from database via Ajax
call and then display it on FancyBox
popup. I also tried many different combinations of Javascript
and Controller
action methods, but have not managed so display the downloaded file properly. Could you please have a look at my code and give a working example containing all the necessary methods in View
and in Controller
? On the other hand, it would be better to open a dialog for the other file types (i.e. excel, pdf) while opening FancyBox
for image files.
查看:
<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中的方法没有问题,正确返回图像.
Controller: There is no problem regarding to the method in the Controller and it returns the image properly.
[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 });
}
推荐答案
最好尝试
success: function (response) {
$.fancybox({
content: '<img height="200" width="250" src="data:image/png;base64,' + response + '" />',
type: "html"
});
}
我想知道为什么当您在已经打开它的地方没有显示任何代码时,您还试图将内容加载到fancybox 容器中.不管怎样,用新的内容启动一个新的fancybox总是更好(来自ajax响应)
I wonder why you trying to load the content inside a fancybox container when you don't show any code where you already opened it. Anyways, it's always better to launch a new fancybox with the new content (from ajax response)
当然,如果 ajax 调用为您的 <img>
标签返回正确的响应,这将起作用,但我不知道.
Of course, this will work if the ajax call is returning the correct response for your <img>
tag, but that I cannot tell.
这篇关于带有 Ajax 的 jQuery FancyBox的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!