使用jquery渲染图像（流对象） [英] Rendering image(stream object) using jquery

问题描述

只是想知道，如何使用jquery将ajax调用中的action方法返回的图像（流）绑定到图像元素。

Just wondering, how can I bind an image (stream) returned by an action method in an ajax call to an image element using 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");

        }

问题：

Action方法返回流，但它没有在页面上呈现。
我在这里错过了一些东西......

The Action method is returning the stream, but it is not getting rendered on the page. I am I missing some thing here...

感谢您的关注。

推荐答案

所以今天我正在努力解决这个问题并遇到了你的问题，这对我有所帮助（并伤害了我）。这是我发现的：

So I was working on this today and ran into your question, which helped (and hurt) me. Here is what I found:

1. 像Eben提到的那样你不能拥有json数据类型。但这只是问题的一部分。当你尝试$（'＃idImgPerson'）。attr（src，data）;在你的代码中你只需将src属性设置为调用返回的字节执行GetPersonImage（）方法。

我结束了使用部分视图：

I ended up using a partial view:

使用标准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请求部分视图，它包含图像而不是直接请求图像。

sorry I know there is a little bit of extra code in the script file i was trying to play with namespaces too. Anyhow, i guess the idea is you request the partial view with ajax, which contains the image rather than requesting the image directly.

这篇关于使用jquery渲染图像（流对象）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！