Changing image of Image control on Client-side

One of my forms allows authorized users to upload images.

Initially I wanted a normal Button along-side an Image control, which when clicked opens a File-Choose Dialog. The user selected file is stright-away displayed in the ImageBox (without any Postbacks or Callbacks). The file would be uploaded to the server when the user clicks another button (called "Update"), which post-backs the entire form to the server. Is this possible???

I don't think so, because later I realized that there needs to be a FileUpload control to send a File from client to the server.

So, I changed my strategy. Now, I have put a FileUpload control, along-side the ImageBox. The rest of the scenario remains the same. User chooses a File, which is displayed in the ImageBox straight-away, and is sent back only on clicking the "Update" button.

I am using the following code to change the image on he client-side with a client-side path:

//JavaScript funciton 

<script language="javascript" type="text/javascript">   
        function LoadImage(){

              document.getElementById('img').src=document.getElementById('File1').value;      
        }   
        </script>

 ////Form Code

<form id="form1" runat="server">
        <input id="File1" type="file" onchange="show()" />       
        <img id="img" src="" alt="Image" />
    </form> 

Code (markup):

Although the onchange event fired after a File was selected, but the Image did not change in the image control. Can somebody help me in figuring out, how to change the image of an Image Box on the client side, with a client-side image path???

 

I do not think that this is possible.

but this may help you

http://www.daniweb.com/forums/thread93856.html

 

Looks like there is no reliable, cross-platform technology to achieve this task right now