显示刚刚上传的图片

Question

我让用户上传图片，效果很好。如果用户第一次加载该页面，该图像也会显示在 Web 表单上。

问题是当用户上传另一张图片（替换图片）时我想在页面上显示新图片（使用ajax），但是什么也没有显示。

网络表单：

<asp:TextBox ID="txtVllID" runat="server" /><br />
<asp:Image ID="imgUploaded" runat="server" /><br />

服务器端脚本：

Public Sub Page_Load(ByVal sender As Object, ByVal args As EventArgs)

    If Page.IsPostBack Then
        Exit Sub
    End If

    'initieren
    txtVllID.Text = Nothing
    txtVllID.Text = Request.QueryString("vllid")
    imgUploaded.ImageUrl = "ImageHandler.ashx?vllid=" & txtVllID.Text

End Sub

ImageHandler.ashx

<%@ WebHandler Language="VB" Class="ImageHandler" %>

Imports System
Imports System.Web
Imports System.IO

Public Class ImageHandler : Implements IHttpHandler

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    Dim vllid = HttpContext.Current.Request.QueryString("vllid")
    context.Response.ContentType = "image/jpeg"
    context.Response.WriteFile("App_Themes/theme_yellow/uploads/" + vllid + ".jpg")
End Sub


Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
        Return False
    End Get
End Property

End Class

jQuery 脚本：

<script type="text/javascript">
$(document).ready(function () {
    var settings = {
        url: "FileUploadHandler.ashx?vllid=" + $("#txtVllID").val(),
        allowedTypes: "jpg,jpeg,png,gif",
        onSuccess: function (files, response, xhr) {
            $.ajax({
                url: "ImageHandler.ashx?vllid=" + $("#txtVllID").val(),
                datatype: "image/jpg",
                success: function (data) {
                    //console.log(data); you see imagedata?(bytes?)
                    $("#imgUploaded").attr("src", data);
                }
            });
            $("#divGelukt").show("slow", function () { });
        }
    }
    $("#UploadArea").uploadFile(settings);
});
</script>

在屏幕上看不到图像。当我在浏览器中查看结果代码时，imgUploades.src 包含不可读的字符。我怎样才能让它显示为图像？

Answer 1

只需将 img src 设置为图像 url，而不是使用 ajax 下载它。

    onSuccess: function (files, response, xhr) {
        $("#imgUploaded").attr("src", "ImageHandler.ashx?vllid=" + $("#txtVllID").val());
        $("#divGelukt").show("slow", function () { });
    }

显示刚刚上传的图片

Show image just uploaded

asp.net

ajax

jquery