MVC4 - Ajax請求圖片ByteArray不工作

Question

我想通過點擊替換我的視圖中的圖像。我的控制器返回一個字節數組，但視圖用原來的圖像替換原來的圖像。

這裏是我的控制器代碼：

 [HttpPost] 
    public byte[] GetSelectedImage(string selectedImageId, string accountId, string courseId) 
    { 
     // Laden des Originalfotos 
     var pictures = (from ga in _db.MyPhotos 
         where 
          ga.AccountId.Equals(accountId) && 
          ga.CourseId.Equals(courseId) && 
          ga.SortOrder.Equals(selectedImageId) 
         select ga.PhotoStreamOriginal.ToArray()); 
     var images = pictures.ToList(); 


     byte[] imageByteArray = images.First(); 
     return imageByteArray; 
    } 

而且票數是我在做什麼在我的javascript：

 $('#makeMeScrollable img').live('click touchstart', function (event) { 
     event.preventDefault(); 
     var selectedImage = $(this).attr('data-id'); 

     var selectedImageId = @Html.Raw(Json.Encode(Model.SelectedImageId)); 
     var accountId = @Html.Raw(Json.Encode(Model.AccountId)); 
     var courseId = @Html.Raw(Json.Encode(Model.CourseId)); 

     $.ajax({ 
      url: '@Url.Action("GetSelectedImage", "UploadPhoto")', 
      dataType: 'text', 
      data: {selectedImageId: selectedImageId, accountId: accountId, courseId: courseId}, 
      type: 'POST', 
      success: function(data) { 
       $('#OriginalImage').attr('src', "data:image/jpg;base64," + data); 
       alert("data:image/jpg;base64," + data); 
      } 
     }); 
    }); 

警報也只出手，數據：圖像/ JPG; BASE64，系統.Byte []

任何想法我做錯了什麼？

感謝您幫助

Answer 1

，而不是返回一個字節數組，你需要返回的base64字符串，像這樣：

[HttpPost] 
public string GetSelectedImage(string selectedImageId, string accountId, string courseId) 
    { 
     // Laden des Originalfotos 
     var pictures = (from ga in _db.MyPhotos 
         where 
          ga.AccountId.Equals(accountId) && 
          ga.CourseId.Equals(courseId) && 
          ga.SortOrder.Equals(selectedImageId) 
         select ga.PhotoStreamOriginal.ToArray()); 
     var images = pictures.ToList(); 


     byte[] imageByteArray = images.First(); 
     return Convert.ToBase64String(imageByteArray); 
    } 

結帳這篇文章中向您展示全過程http://www.codeproject.com/Articles/201767/Load-Base64-Images-using-jQuery-and-MVC

Answer 2

如果你使用的是MVC4，你可能想更進一步，並刪除所有的基礎64轉換。你可以使用FileStreamResult來達到良好的效果，只需動態地將img src設置爲控制器動作（使用Url.Action中的路由值），如下所示（您需要編輯，我無法測試準確性，但它應該給你一個好主意）：

$('#makeMeScrollable img').live('click touchstart', function (event) { 
    event.preventDefault(); 
    var selectedImage = $(this).attr('data-id'); 

    var selectedImageId = @Html.Raw(Json.Encode(Model.SelectedImageId)); 
    var accountId = @Html.Raw(Json.Encode(Model.AccountId)); 
    var courseId = @Html.Raw(Json.Encode(Model.CourseId)); 

    $('#OriginalImage').attr('src', @Url.Action("GetSelectedImage", "UploadPhoto", new { selectedImageId = selectedImageId, etc })); 

    // no need for this 
    //$.ajax({ 
    // url: '@Url.Action("GetSelectedImage", "UploadPhoto")', 
    // dataType: 'text', 
    // data: {selectedImageId: selectedImageId, accountId: accountId, courseId: courseId}, 
    // type: 'POST', 
    // success: function(data) { 
    //  $('#OriginalImage').attr('src', "data:image/jpg;base64," + data); 
    //  alert("data:image/jpg;base64," + data); 
    // } 
    }); 
}); 

[HttpGet] 
public ActionResult GetSelectedImage(string selectedImageId, string accountId, string courseId) 
{ 
    // Laden des Originalfotos 
    var pictures = (from ga in _db.MyPhotos 
        where 
         ga.AccountId.Equals(accountId) && 
         ga.CourseId.Equals(courseId) && 
         ga.SortOrder.Equals(selectedImageId) 
        select ga.PhotoStreamOriginal.ToArray()); 
    var images = pictures.ToList(); 


    byte[] imageByteArray = images.First(); 
    return base.File(imageByteArray, "image/jpg"); 
} 

注意，你還需要一個路線設置將請求路由到正確的行動，但應該是很容易弄清楚......

Answer 3

這使您可以獲取圖像數據並設置爲img src，這很酷。

var oReq = new XMLHttpRequest(); 
oReq.open("post", '/somelocation/getmypic', true);   
oReq.responseType = "blob"; 
oReq.onload = function (oEvent) 
{ 
    var blob = oReq.response; 
    var imgSrc = URL.createObjectURL(blob);       
    var $img = $('<img/>', {     
     "alt": "test image", 
     "src": imgSrc 
    }).appendTo($('#bb_theImageContainer')); 
    window.URL.revokeObjectURL(imgSrc); 
}; 
oReq.send(null); 

的基本思想是將數據返回篡改，，它被放置在一個斑點，然後創建鏈接直接在存儲器中該對象。見here和here。請注意支持的瀏覽器。