Load Image with Javascript from ASP.NET FileUpload control

Question

I am trying to load an asp image box <asp:Image ID="imgPicture" width="200" height="200" runat="server" /> with an image after a user has selected one using the asp.net fileupload control <asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>

HTML

<asp:Image ID="imgPicture" width="200" height="200" runat="server" />
<asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>

Javascript

<script type="text/javascript">
    function LoadImage(path, img) {
        imgPrev = document.images[img];
        imgPrev.src = path;
   }
</script>

The image will not load in the imgPicture control. Also I noticed that by adding an alert to the javascript function to alert the path and image, that the path is C:\fakepath\ImageName.jpg. I am unsure why it says fakepath.

Any help is appreciated. Also note that this project has a C# code file behind it.

Solution

After all of your input, I have changed my FileInput control code to be as follows:

<asp:FileUpload ID="fluPicture" onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();" runat="server" Width="200"/>

I then added a test to the Page.OnLoad event to determine if the file is ready to be uploaded.

if (fluPicture.PostedFile != null && fluPicture.PostedFile.ContentLength > 0) UploadImage();

Then I allowed the UploadImage() method to upload the image, store it, and then set the url of the imagebox to the uploaded image's url.

Thank you all for your help and input. Also, I appreciate the jQuery ideas. In this instance I just needed something quick and dirty to get the job done.

Comments

[pixelbobby]

cannot see your HTML or JS. Can you add this? Make sure you format the code properly using a code block in the editor :]

[puddinman13]

I apologize. It should be visible now, thx.

[puddinman13]

Right I understand it is not yet located on the server, but doesn't javascript have the capability of loading the image from the clients machine into the image preview box without first doing a postback? I will take care of uploading the image at a later point in the lifecycle.

[Blindy]

Actually, no, it doesn't. The file upload control has a very restrictive set of permissions, and any sort of client side processing is disabled.

[Colin Chen]

Your other option is to use a ajax style upload control, that can immediately post back your file to the server. Here is a link with a few examples that use jQuery. webdeveloperjuice.com/2010/02/13/…

[Colin Chen]

Here is another link that looked good, it describes a snipped to allow you to upload and preview an image. zurb.com/playground/ajax_upload

[puddinman13]

1. This had nothing to do with displaying file size. 2. This question was resolved years ago.