jquery - 使用来自 ASP.Net MVC 的 FileStreamResult 显示图像

Question

我正在开发一个允许刷新验证码图像的验证码控件。我没有将图像存储在服务器上的选项。为此，我正在使用 ASP.Net MVC。

我的 Controller 操作代码:

public FileResult GetCaptchaImage()
{

    // Create a CAPTCHA image using the text stored in the Session object.
    CaptchaImage ci = new CaptchaImage(this.Session
        ["CaptchaImageText"].ToString(), 300, 75);
    // Change the response headers to output a JPEG image.
    MemoryStream stream = new MemoryStream();
    ci.Image.Save(stream, ImageFormat.Png);
    stream.Seek(0, SeekOrigin.Begin);
    return new FileStreamResult(stream, "image/png");
}

在 Razor View 中显示图像的 html 代码

<img id="captchaImage" class="img-responsive" src="@Url.Action("GetCaptchaImage","Home")" />

现在，当我点击刷新按钮时，这个 img 应该会更新。单击按钮时，我使用 ajax 调用再次调用相同的 Controller 操作，它返回 FileStreamResult。

function RefreshCaptcha() {
$.ajax({
    url: "/Home/GetCaptchaImage"
}).then(function (data) {
    console.log(data);
});

现在，使用JQuery，如何在图片中设置响应内容？

请指导。非常感谢。

Answer 1

无需使用 ajax，只需调用相同的 URL，但传入一个无缓存查询字符串，这样它就不会缓存该值，然后更改图像的来源:

$('#captchaImage').attr('src', '/Home/GetCaptchaImage?nc=' + (new Date).getTime(););

在我的示例中，我使用的是纪元时间，但您可以简单地使用随机值。