c# - Load Image with Javascript from ASP.NET FileUpload control - Stack Overflow

admin管理员组

文章数量:1405343

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 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.

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 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.

• c#
• javascript
• asp
• image
• file-upload

Share Follow edited May 9, 2011 at 19:17 pixelbobby 4,44055 gold badges3131 silver badges5050 bronze badges asked May 9, 2011 at 18:41 puddinman13puddinman13 1,40844 gold badges1818 silver badges3535 bronze badges 2

• 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 Commented May 9, 2011 at 18:44
• I apologize. It should be visible now, thx. – puddinman13 Commented May 9, 2011 at 18:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

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.

ASP.Net (HTML) CODE :

<asp:FileUpload ID="FileUpload1" runat="server" Height="22px" onchange="showImage()"/>
<asp:Image ID="Image1" runat="server" Width="200PX" Height="200PX"   />

JAVASCRIPT CODE :

function showImage() 
        {
            // Get File Upload Path & File Name
            var file = document.getElementById("FileUpload1");
            // Set Image Url from FileUploader Control
            document.getElementById("Image1").src = file.value;
            // Display Selected File Path & Name
            alert("You selected " + file.value);
            // Get File Size From Selected File in File Uploader Control 
            var inputFile = document.getElementById("FileUpload1").files[0].size;
            // Displaty Selected File Size
            alert("File size: " + inputFile.toString());
        }

I think That can Help You. its perfectly run on my pc.

本文标签： cLoad Image with Javascript from ASPNET FileUpload controlStack Overflow