用js函數更新div內容與json結果

首先描述我的場景。在我的網頁上，我有ID與showImage div。貝爾認爲div很少有拇指。我想要在showImage div中顯示更大的圖像，而無需刷新課程頁面。所以這就是我現在所擁有的。每個圖像生成的HTML是用js函數更新div內容與json結果

<a href="/Property/GetImage/7"> 
    <img id="7" class="details" width="100" height="100" src="/Property/GetImage/7" alt=""> 
</a>

我取圖片ID並將它傳遞給我的控制器將返回我的圖像（也許我不需要這個，因爲我已經有同一頁上這個形象，但我不知道如何使用它）繼續，控制器將返回一個圖像，我需要在showImage div佔位符中顯示更大的尺寸。這裏是我的代碼

function ShowLargeImage(imageId) { 
     $.ajax({ 
      url: ('/Home/GetImage'), 
      type: 'POST', 
      contentType: 'application/json', 
      data: JSON.stringify({ id: imageId }), 

      success: function (result) { 
       //need to pass result(image)to my div 
      }, 
     }); 
    } 

    function onPopUp() { 
     $(".details").click(function (event) { 
      var imageId = (this.id); 
      ShowLargeImage(imageId); 
     }); 
    }

的問題是：如何從JS我showImage格打電話，例如。 showImage.Show（結果）; 這可能嗎？

來源

2012-03-21 BobRock

您的問題是什麼？ – Christoph 2012-03-21 09:46:37

結果是''標籤？要麼？ – 2012-03-21 09:47:40

我不知道如何將結果傳遞給我的div？ – BobRock 2012-03-21 09:47:54

如果你已經有圖像，並希望表明，在另一個DIV，你可以做

$(".details").click(function (event) { 
     //clone the clicked image 
     var clone = $(this).clone(); 
     //change the dimensions 
     clone.height("150px").width("150px"); 
     //place it in the placeholder   
     $('div#placeholder').html(clone); 
    });

來源

2012-03-21 09:50:22

布拉沃尼古拉，謝謝 – BobRock 2012-03-21 09:54:05

是否有可能在不同尺寸的結果div中獲得克隆圖像？ – BobRock 2012-03-21 10:06:59

@ user313378是的，當然，我已經更新了我的答案，只是修改了克隆:) – 2012-03-21 10:10:49

您正在尋找jQuery的html() function.

不過話又說回來，簡單地返回圖像文件的源不會幫助你。

你想要做什麼（如果你絕對是必須返回源代碼，這是一個壞主意，因爲太多的原因在這裏列出它們）是對這些代碼進行64位編碼：然後

function base64_encode_image ($imagefile) { 
    $imgtype = array('jpg', 'gif', 'png'); 
    $filename = file_exists($imagefile) ? htmlentities($imagefile) : die('Image file name does not exist'); 
    $filetype = pathinfo($filename, PATHINFO_EXTENSION); 
    if (in_array($filetype, $imgtype)){ 
     $imgbinary = fread(fopen($filename, "r"), filesize($filename)); 
    } else { 
     die ('Invalid image type, jpg, gif, and png is only allowed'); 
    } 
    return 'data:image/' . $filetype . ';base64,' . base64_encode($imgbinary); 
}

你的AJAX成功回調應該是這樣的：

success: function (large_img_src) { 
    $('#showImage').html('<img src="' + large_img_src + '"/>'); 
}

一個更清潔的版本，如克里斯Gess稱提到只會獲取大圖片的URL：

function ShowLargeImage(imageId) { 
    $.ajax({ 
     url: ('/Home/GetImage'), 
     type: 'POST', 
     contentType: 'application/json', 
     data: JSON.stringify({ id: imageId }), 

     success: function (large_img_url) { 
      $('#showImage').html('<img src="' + large_img_url + '"/>'); 
     }, 
    }); 
}

來源

2012-03-21 09:51:05 vzwick

用js函數更新div內容與json結果

回答

相關問題