jQuery + webforms: call an ashx, and refresh an image as a result
-
19-09-2019 - |
Question
Consider an ASP.NET page using the jQuery library Uploadify.
Here is the sequence of events on the ASP.NET webforms page:
- User clicks on a file upload control. Plain old HTML
<input type="file" />
- User picks an image file from their system using a Browse dialog. All working fine.
- A jQuery event fires. It calls an ashx that properly uploads as expected.
- 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
Solution
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);
}