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

回答

相關問題