jquery와 FileResult를 사용하여 이미지의 src를 변경하십시오.

jQuery를 사용하여 동적으로 이미지의 소스를 변경하려고합니다. 여기에 우리가 전에 무엇을하고 있는지의 예jquery와 FileResult를 사용하여 이미지의 src를 변경하십시오.

imageSrc 변수가 이미지의 실제 위치를 저장 한

$('#resultsDiv').on('mouseover', '.cardImage', function() { 
     var imageSrc = $(this).attr("data-id"); 

     imageSrc = imageSrc.replace("~", ""); 

     $('#cardImageDiv').attr('src', imageSrc); 
    });

; 그러나 우리는 더 이상 서버의 이미지의 실제 위치에 액세스 할 수 없으므로이를 변경해야합니다. 그래서 우리는 데이터베이스에 우리의 이미지를 저장 한 나는이처럼 다시 얻으려고 :

$('#resultsDiv').on('mouseover', '.cardImage', function() { 
    var cardID = $(this).attr("data-id"); 

    alert("woah!"); 

    alert(cardID); 

    $.ajax({ 
     type: "GET", 
     url: '@Url.Action("UpdateImageByCardID","Images")', 
     data: {_cardid: cardID}, 
     datatype: "image/png", 
     success: function (data) { 
      alert("yeah!"); 
      $('#cardImageDiv').attr('src', data); 
     } 
    }); 
});

cardId 이미지의 고유 식별자입니다. 여기에 Images 컨트롤러 조치는 다음과 같습니다

public FileResult UpdateImageByCardID(int? _cardid) 
{ 
    byte[] imageData = mImageManager.GetNormalImageAsyncByCardId((int)_cardid); 

    return File(imageData, "image/png"); 
}

는 지금은 작업이 디버깅에 명중하고 올바른 byte[] 값, 그러나 이미지 SRC가 업데이트되지 않습니다 반환 알고있다. 자세한 내용은

은 여기에 첫 번째 이미지가 표시되는 방법은 다음과 같습니다

<img id="cardImageDiv" src="@Url.Action("GetNormalImageByCardIdAsync", "Images", new { @_cardId = firstSrc.CARD_IDE})" alt="@firstSrc.CARD.CARD_NAME" title="@firstSrc.CARD.CARD_NAME" class="nullify"/>

GetNormalImageByCardIdAsync 컨트롤러 작업에 의해 반환 비동기 파일이며 그것의 일을한다. 이제 문제의 원인을 알고 싶습니다. 어떻게 해결할 수 있습니까?

출처

2014-09-18 hsim

성공 후 경고 메시지가 표시됩니까? – Gjohn

예, 모든 경고가 트리거됩니다. – hsim

파일을 다운로드하고 있으며 경로를 찾는 src에 파일을 적용하고 있습니다. 실제 이미지 대신 이미지의 URL 경로를 제공하면 안됩니까? – Gjohn

오 와우, 내가 생각했던 대답이 너무 심플하게 보였다!

내가 할 일은 내가 소스로 패치하고 싶었던 컨트롤러 액션의 링크를 없애고, 소스를 대체하고, 현실을 바꾸는 것입니다! 그래서 여기 뷰의 각 항목

@{ 
    string src = "/Images/GetNormalImageByCardIdAsync?_cardid=" + CardPackViewModel.CARD.CARD_IDE; 

    @Html.ActionLink(CardPackViewModel.CARD.CARD_NAME, "ItemDetails", "Item", new { @_itemID = CardPackViewModel.CARD_IDE, @_provenance = "Deck" }, new { @class = "cardImage", @data_id = src, @data_name = CardPackViewModel.CARD.CARD_NAME})  
}

이 요소에 저장되어있는 링크가 :

다음은 예입니다. 다음의 데이터를 검색하자

는

$('#resultsDiv').on('mouseover', '.cardImage', function() { 
    var imageLink = $(this).attr("data-id"); 

    var itemName = $(this).attr("data-name"); 

    $('#cardImageDiv').attr('src', imageLink); 

    $('#cardImageDiv').attr('alt', itemName); 

    $('#cardImageDiv').attr('title', itemName); 
});

그리고, 놀랍게도, URL의 변화는 ActionResult 컨트롤러 메소드를 호출하고 이미지는로드 따라 표시됩니다. 웹은 나를 깜짝 놀라게한다!

출처

2014-09-18 17:45:54 hsim

이 작업을 수행하는 유일한 방법은 이동하여 데이터베이스에서 이미지를 검색하는 사용자 지정 처리기를 작성하는 것입니다. 당신은 적절한 "cardId"여기

는 asp.net와 함께이 일을하는 예이지만 생각도 asp.net의 MVC 또는

http://aj-learning.com/blog/store-retrieve-image-database-asp-net-using-jquery/

을 사용하는 어떤 다른 사용할 수 있습니다를 통과해야

출처

2014-09-18 16:35:07 Gjohn

jquery와 FileResult를 사용하여 이미지의 src를 변경하십시오.

답변

관련 문제