Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
cannot see your HTML or JS. Can you add this? Make sure you format the code properly using a code block in the editor :] – pixelbobby May 9 '11 at 18:44
I apologize. It should be visible now, thx. – puddinman13 May 9 '11 at 18:48

2 Answers

up vote 2 down vote accepted

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.

share|improve this answer
up vote 0 down vote

You file is not uploaded until you do a post back, it sounds like your only browsing to the file and then trying to get a thumbnail before you post back/upload the image.

share|improve this answer
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. – puddinman13 May 9 '11 at 18:56
1  
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. – Blindy May 9 '11 at 18:59
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/… – Zachary May 9 '11 at 20:35
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 – Zachary May 9 '11 at 20:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.