Hi,
I have a Ajaxupload witch i use for uploading images to a database, for the displaying of the image i user a .ashx handler.
Now i have one problem, when i load the page i use the Image1.ImageURL = "~/handler.ashx?ImageId=" + iImageId; in the formload.
The problem is when i upload a new image with a AjaxUpload(See code below) i cannot use the same handler(Because the image url stays the same and the browser doesn`t do anything then) so i made a new handler ImageRefresh. This works fine if i load a new image for 1 time, but if i want to load a new image it doesn`t show the new image. I use the handler to update a profile image..so the id stays the same.
I`ve tried to use a session variable..but because the script is loaded in the document.ready function, the session stays the same..(Or I'm doing something wrong in the session) Below i will show some examples witch I've tried.
Example 1: var tmpCount = 0; $(function () { new AjaxUpload('#udUploadButton', { action: 'WIUploadHandler.ashx', onComplete: function (file, response) { $("<div><img src='./Images/upload/btndelete.png' onclick=\"DeleteFile('" + response + "')\" class='delete'/>" + response + "</div>").appendTo('#UploadedFile'); }, onSubmit: function (file, ext) { if (!(ext && /^(jpeg|jpg|png|gif)$/i.test(ext))) { alert('Invalid File Format.'); return false; } $('#UploadStatus').html("Uploading..."); refreshImage(); //var ses = '<%=Session["SESSION_ProImgID"].ToString() %>'; //img.src = 'RefreshImage.ashx?ImageId=' + ses.toString(); } }); }); function refreshImage() { var ses = '<%=Session["SESSION_ProImgID"].ToString() %>'; var tmpSes = '<%=Session["SESSION_IMAGEPROFILEREFRESH"].ToString() %>' if (tmpSes == "2") { tmpCount = 1; document.getElementById("MainContent_ucUserDetails_hdSession").value = tmpCount; $('#UploadStatus').html("file has been uploaded sucessfully"); var img = document.getElementById("<%=this.imgUserProfile.ClientID%>"); img.src = 'udImageHandler.ashx?ImageId=' + ses.toString();<%=Session["SESSION_ProImgID"] = hdSession.Value%>; document.getElementById("lblSession").innerHTML = tmpSes.toString(); } if (tmpSes == "1") { tmpCount = 2; document.getElementById("MainContent_ucUserDetails_hdSession").value = tmpCount; $('#UploadStatus').html("file has been uploaded sucessfully"); var img = document.getElementById("<%=this.imgUserProfile.ClientID%>"); img.src = 'RefreshImage.ashx?ImageId=' + ses.toString();<%=Session["SESSION_ImgID"] = hdSession.Value%>; document.getElementById("lblSession").innerHTML = tmpSes.toString(); } //If i do this the session stays 1 so the image doesn`t refresh Example: does refresh the image..but only one time, so I'm hoping somebody knows a good solution/workarround.. $(function () { new AjaxUpload('#udUploadButton', { action: 'WIUploadHandler.ashx', onComplete: function (file, response) { $("<div><img src='./Images/upload/btndelete.png' onclick=\"DeleteFile('" + response + "')\" class='delete'/>" + response + "</div>").appendTo('#UploadedFile'); }, onSubmit: function (file, ext) { if (!(ext && /^(jpeg|jpg|png|gif)$/i.test(ext))) { alert('Invalid File Format.'); return false; } $('#UploadStatus').html("Uploading..."); var ses = '<%=Session["SESSION_ProImgID"].ToString() %>'; img.src = 'RefreshImage.ashx?ImageId=' + ses.toString(); } }); });
Best regards,
Mark