使用jquery渲染圖像（流對象）

只是想知道，我怎樣才能綁定一個圖像（流）通過ajax調用中的操作方法返回的圖像元素使用jQuery。使用jquery渲染圖像（流對象）

的JavaScript：

$(document).ready($(function() { 
     $(':input').change(function() { 

       // object 
       var Person = { 
          Name: 'Scott', 
          Address: 'Redmond' 
         }; 
       // Function for invoking the action method and binding the stream back 
       ShowImage(Person); 
    }); 
})); 

function ShowImage(Person) { 


     $.ajax({ 
      url: '/Person/GetPersonImage', 
      type: "Post", 
      data: JSON.stringify(Person), 
      datatype: "json", 
      contentType: "application/json; charset=utf-8", 
      success: function (data) { 

       // idImgPerson is the id of the image tag 
       $('#idImgPerson') 
        .attr("src", data); 

      }, 
      error: function() { 
       alert('Error'); 
      } 
     });

操作方法：

public FileContentResult GetPersonImage(Person person) 
     { 

      // Get the image  
      byte[] myByte = SomeCompnent.GetPersonImage(person); 
      return File(myByte, "image/png"); 

     }

問題：

行動方法返回流，但沒有得到呈現在這一頁。我在這裏錯過了一些東西...

感謝您關注它。

來源

2011-05-17 DotNetDev

您正在使用'datatype：「json」'。根據指定您希望服務器返回的數據類型的API文檔。嘗試刪除它。 – 2011-05-17 16:03:49

因此，我今天正在處理這個問題，並且遇到了您的問題，這有助於（並且傷害了我）。這裏是我發現的：

像Eben提到你不能有json數據類型。但那只是問題的一部分。當你嘗試$（'＃idImgPerson'）。attr（「src」，data）;就像在你的代碼中一樣，你只需要將src屬性設置爲由GetPersonImage（）方法調用返回的字節即可。

我最終使用的局部視圖：

使用標準模板MVC3

Index.cshtml（節選）：

<h3>Using jquery ajax with partial views</h3> 
<div id="JqueryAjax"> 
<input class="myButton" data-url='@Url.Action("GetImagesPartial","Home")' name="Button1" type="button" value="button" />

創建局部視圖其中引用了提供圖像的動作：

@model string 

<div> 
<img id="penguinsImgActionJquery" alt="Image Missing" width="100" height="100" 
src="@Url.Action("GetPersonImage", "Home", new { someString=Model })" /> 
<br /> 
<label>@Model</label> 
</div>

HomeController中有兩種操作方法：

public ActionResult GetImagesPartial(string someImageName) 
    { 

     return PartialView((object)someImageName); 
    } 

    public FileContentResult GetPersonImage(string someString) 
    { 

     var file = System.Web.HttpContext.Current.Server.MapPath(localImagesPath + "Penguins.jpg"); 
     var finfo = new FileInfo(file); 
     byte[] myByte = Utilities.FileManagement.FileManager.GetByteArrayFromFile(finfo); 
     return File(myByte, "image/png"); 

    }

的Jquery：

$(document).ready(function() { 
$('.myButton').click(function (e) { 
    var bleh = $(this).attr("data-url"); 
    e.preventDefault(); 
    someData.runAjaxGet(bleh); 
}); 

var someData = { 
    someValue: "value", 
    counter: 1, 
}; 
someData.runAjaxGet = function (url) { 
    _someData = this; 
    $.ajax({ 
     url: url, 
     type: "Get", 
     data: { someImageName: "ImageFromJQueryAjaxName" + _someData.counter }, 
     success: function (data) { 
      $('#JqueryAjax').append(data); 
      _someData.counter = _someData.counter + 1; 
     }, 
     error: function (req, status) { 
      alert(req.readyState + " " + req.status + " " + req.responseText); 
     } 
    }); 

}; 
});

抱歉，我知道有額外的代碼腳本文件我也有一點點試圖玩命名空間。無論如何，我想這個想法是你用ajax請求局部視圖，它包含圖像而不是直接請求圖像。

來源

2012-04-21 01:35:49

使用jquery渲染圖像（流對象）

回答

相關問題