Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: .NET3.5 ASP.NET Ajax
I am using a master page and i have a code the image gets uploaded but the image preview is shown of the previous image .
 

but when i inspect the source i get the new image preview in the web developer console .
 

both the new and old image has the same name .
 
MAy be the cached preview is shown .
 
can anyone help me
 

 
<myasp:UpdatePanel ID="UpdatePanel1" runat="server">
                               <ContentTemplate>
                                   <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
                                       OnClientUploadStarted="UpLoadStarted" OnClientUploadError="UploadError" OnClientUploadComplete="UploadComplete" />
                               </ContentTemplate>
                           </myasp:UpdatePanel>
 
                           <myasp:UpdatePanel ID="UpdatePanel2" runat="server">
                               <ContentTemplate>
                                   <div class="thumbnail_pic_box">
                                       <asp:Image ID="imgproj" runat="server" alt="Profile" title="Profile" ImageUrl="~/uploads/NO_IMAGE.jpg" />
                                   </div>
                               </ContentTemplate>
 
                               </myasp:UpdatePanel>
                            <div id="diverror" >
                                   <asp:Label ID="Label1" runat="server" class="errorproj" ></asp:Label>
                               </div>
 

 

 

 

 
function showImage(imagePath)
        {
            alert(imagePath);
            var a = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("imgproj").ClientID %>');
            alert(a);
            $('#'+'<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("imgproj").ClientID %>', window.parent.document).attr("src", imagePath); //imgproj
 
        }
        function clearContents() {
            var AsyncFileUpload = document.getElementById('<%=Page.Master.FindControl("ContentPlaceHolder1").FindControl("AsyncFileUpload1").ClientID%>');
            var txts = AsyncFileUpload.getElementsByTagName("input");
            for (var i = 0; i < txts.length; i++) {
                //type == "file" is what is needed to clear the value
                if (txts[i].type == "hidden" || txts[i].type == "file") {
                    txts[i].value = "";
                }
            }
            $get("<%= Label1.ClientID %>").innerHTML = "";
        }
        function errorMsgFunction(sender, args) {
            $('#diverror', window.parent.document).show();
            $('#diverror', window.parent.document).fadeOut(2000);
 
            //            $('.errorproj', window.parent.document).fadeIn(4000, function()
            //            {
 
            //                $('.errorproj', window.parent.document).fadeOut(2000, function()
            //                {
            //                    $('.errorproj', window.parent.document).remove();
            //                });
            //            });
 
            //            $('#diverror', window.parent.document).fadeIn(500, function()  {
            //                $('#diverror', window.parent.document).fadeOut('slow');
 
            //            });
 
        }
 
        var ifIgnoreError = false;
        function UpLoadStarted(sender, e) {
            var fileName = e.get_fileName();
 
            var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
            if (fileExtension == 'jpg' || fileExtension == 'jpeg' || fileExtension == 'gif' || fileExtension == 'GIF' || fileExtension == 'png' || fileExtension == 'PNG') {
 
                //file is good -- go ahead
 
            }
            else {
                //stop upload
                ifIgnoreError = true;
                sender._stopLoad();
                alert('error');
            }
        }
        //Function to Show if Error Occurred
        function UploadError(sender, e) {
            if (ifIgnoreError) {
 
                $('#' + '<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("Label1").ClientID %>').text('Incorrect File Format').fadeIn();
                $("#diverror").fadeIn(4000, function() {
 
                    $(this).fadeOut(6000, function() {
                        clearContents();
                        $('#'+'<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("imgproj").ClientID %>', window.parent.document).attr("src", "uploads/NO_IMAGE.jpg");
 
                    });
                });
            }
 
            else {
                alert(e.get_message());
            }
        }
 

//Client Side Function On complete of upload to check if Any error has occured
        function UploadComplete(sender, args) {
            var textError = $get('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("Label1").ClientID %>').innerHTML;
            if (textError.length > 0) {
                $('#' + '<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("imgproj").ClientID %>', window.parent.document).attr("src", "uploads/connecting.png"); //
                $('#' + '<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("Label1").ClientID %>').fadeIn();
                $("#diverror").fadeIn(4000, function() {
                    $(this).fadeOut(6000, function() {
                        clearContents();
                    });
                });
                return;
            }
            else {
                var img = new Image();
                img.src = args.get_fileName();
 
                img.onload = function() {
                    $('#' + '<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("imgproj").ClientID %>').attr('src', img.src);
                }
            }
        }
 

 

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
   {
 
       if (AsyncFileUpload1.HasFile)
       {
           System.Drawing.Image postedImage = System.Drawing.Image.FromStream(this.AsyncFileUpload1.PostedFile.InputStream);
          // if (postedImage.Width <= 100 || postedImage.Height <= 94)
           {
 

               //int fileSize = Int32.Parse(Path.GetFileName(e.FileSize));
               // if (fileSize < 85000) //size in bytes
               // {
               string filext = Path.GetExtension(AsyncFileUpload1.FileName);
               {
 
                   //string path = Server.MapPath("temp/") + Path.GetFileName(e.FileName);
                   string sessionId = this.Session.SessionID;
                   string path = Server.MapPath("temp/") + sessionId + filext;
                   AsyncFileUpload1.SaveAs(path);
                   string imgSrc = "temp/" + sessionId + filext;
                   Session["projImage"] = path;
                   ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "showImage", "showImage('" + imgSrc + "');", true);
 
               }
           }
           //else
           //{
           //    //string textError = "File is bigger than 100KB.";
           //    string textError = "Please Upload Image of the resolution 100x94.";

           //    ////client-side error
           //   // ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "size", "top.$get(\"" + Label1.ClientID + "\").innerHTML='" + textError + "';", true);
           //    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "showImage", "showImage('Inside File not found');", true);
           //    // ClientScript.RegisterStartupScript(this.GetType(), "js", "confirmCallBack();", true);

           //    return;
           //}
       }
       else
       {
           ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "showImage", "showImage('File not found');", true);
       }
Posted 10-Jan-13 19:01pm
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

If you are using an Ajax-Control, everything the Ajax control does is rendered on client side. A forced postback after the Ajax control has processed the operation might help you.
Instead of a postback you can use JavaScript to update the image.
 
cheers,
Marco Alessandro Bertschi
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

I added ? and random no to the end of the profImg source .It causes Image to be considered as dynamic content hence causing fresh Fetching of the Image
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 723
1 George Jonsson 370
2 BillWoodruff 277
3 Garth J Lancaster 250
4 Sergey Alexandrovich Kryukov 249
0 Sergey Alexandrovich Kryukov 10,764
1 Maciej Los 5,474
2 OriginalGriff 5,472
3 CPallini 3,819
4 BillWoodruff 3,594


Advertise | Privacy | Mobile
Web01 | 2.8.141030.1 | Last Updated 14 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100