Question

首先描述我的场景。在我的页面上，我有一个id为showImage的div。 Bellow那个拇指很少。我想在showImage div中显示更大的图像，没有刷新页面。所以这就是我现在所拥有的。为每张图片生成的html是

<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 div。 showImage.Show（结果）; 这可能吗？

Answer 1

如果您已经拥有该图片并希望在另一个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);
    });

Answer 2

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

但是，再一次，只是返回图像文件的来源对你没有帮助。

你想要做什么（如果你绝对必须返回源，这是一个坏主意，因为太多的理由在这里列出所有这些）是对图像进行base64编码沿着这些方向：

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 + '"/>');
}

Chris Gessler提到的一个更清洁的版本只是获取大图像的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 + '"/>');
        }, 
    });
}

使用js函数的json结果刷新div内容

2 个答案: