Показать только что загруженное изображение

Question

Я даю пользователю загрузить изображение, которое отлично работает. Изображение также отображается в веб-форме, если пользователь загружает страницу в первый раз.

Проблема заключается в том, когда пользователь загружает другое изображение (заменяя изображение). Я хочу, чтобы новое изображение отображалось на странице (с использованием 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() { }); 
    }