jQuery + webforms: call an ashx, and refresh an image as a result

Question

Consider an ASP.NET page using the jQuery library Uploadify.

Here is the sequence of events on the ASP.NET webforms page:

1. User clicks on a file upload control. Plain old HTML <input type="file" />
2. User picks an image file from their system using a Browse dialog. All working fine.
3. A jQuery event fires. It calls an ashx that properly uploads as expected.
4. Now that the file is uploaded, how can I change an <asp:image> on the calling .aspx page? Would really like to do this without a postback!

Here's the code!

<asp:Image ID="imgChangeMe" runat="server" /><br />
<input type="file" name="uploadify" id="uploadify" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#uploadify").uploadify({
        'uploader'       : 'scripts/uploadify/uploadify.swf',
 'script'         : 'uploadify.ashx',
 'folder'         : 'uploads',
 'queueID'        : 'fileQueue',
 'auto'           : true,
 'multi'          : true
        });
       });
 </script>

Question:

How would you implement the changing of the <asp:image> to reflect the image that the user just uploaded?

This question really shouldn't be related to the uploading library, but rather, how to react to the return/end of execution of an .ashx? Should this be done in another jQuery method

Answer 1

You can definitely do this without making a postback. All you need is to get the path of the uploaded image. From Uploadify documentation I think you can get path from fileObj property or return it from server in response property:

fileObj: An object containing details about the file that was selected.

• name – The name of the file
• filePath – The path on the server to the uploaded file
• size – The size in bytes of the file
• creationDate – The date the file was created
• modificationDate – The last date the file was modified
• type – The file extension beginning with a ‘.’

response: The data sent back from the server.

Now if your aspx image is like:

<aspx:image id="myImage"...../>

you can set it as follows:

 //Uploadify hookup

 'onComplete': function(evt, qid, fObj, res){
     var f = fObj.filePath + fObj.name; //PUT SLASH IF REQUIRED BETWEEN
     $("img[id$='myImage']").attr("src",f);

     //for future readers who might be using master pages.
     $('#<%=myImage.ClientID %>').attr("src", f);
     $('#<%=txtMyImgPath.ClientID %>').val(f);
 }