I let the user upload an image, which works fine. The image is also shown on the web form if the user loads the page for the first time.
The problem is when the user uploads another image (replacing the image) I want the new image to be shown on the page (using ajax), but nothing is shown.
the webform:
<asp:TextBox ID="txtVllID" runat="server" /><br />
<asp:Image ID="imgUploaded" runat="server" /><br />
server side script:
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:
<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>
On the screen the image is not visible. When I look at the result code in the browser the imgUploades.src contains unreadable characters. How can I let this be shown as an image?
Just set the img src to the image url, instead of downloading it with ajax.
onSuccess: function (files, response, xhr) {
$("#imgUploaded").attr("src", "ImageHandler.ashx?vllid=" + $("#txtVllID").val());
$("#divGelukt").show("slow", function () { });
}