I recently finished a solution that uploads an image to my server, and then displays the uploaded image to the user. this is all done “asynchrously”, and it’s within an update panel to boot.
There are a good handful of solutions for doing this. One of the most popular is SWFUpload but I didn’t want to use any flash in my solution – some customers will not have it or it is blocked by some agencies… yes in the real world large agencies and corporations still use IE6 so HTML5… I’ll see you in a few years… back on track.
For the image upload I used a simple JQuery script written by Andris Valums. Out of all the scripts I looked at, this was the most straight forward, easy to implement, and had no inner tweaks that could cause issues in the future.
Seeing this is inside an update panel I wrapped the initialization script inside a function which I call from the script manager when the UpdatePanel is updated.
Once the image is uploaded I refresh the image by clearing out the containing div and recreating the image element. This is a tricky one. Even though the image element was deleted and recreated, the SRC was the same so browsers were caching the image. I decided to throw in an extra random value to the URL so the browser would be forced to get the newest image.
At the end I scale the image using a very simple JQuery image scaling plug-in. Below are the JS script files I used.
- Image Scaling JS - http://bicnet.org/files/jquery.custom.js
- File Upload JS - http://bicnet.org/files/fileuploader.js
Hope this helps anyone looking to do something similar.