image preview at Image1 ?

Question

0.00/5 (No votes)

See more:

are it's possible which i'm trying ?

my jquery

XML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">
        function showimagepreview(input) {
            if (input.files && input.files[0]) {
                var filerdr = new FileReader();
                filerdr.onload = function (e) {
                    $('#Image1').attr('src', e.target.result);
                }
                filerdr.readAsDataURL(input.files[0]);
            }
        }
    </script>

fileupload1

VB

<asp:FileUpload ID="FileUpload1" runat="server"
           onchange="showimagepreview(this)"/>

i want preview at Image1

please help me to generate preview of upload image

Posted 22-Apr-14 19:19pm

neeraj_

Updated 22-Apr-14 20:44pm

v2

Add a Solution

Comments

ravikhoda 23-Apr-14 1:51am

as per my knowledge you can not directly view image which is not on your server(you can not access an image/file from the client machine directly). first you need to update the image on the server and than you can show the preview of that image.

may be upload the image to some temp directory

3 solutions

Solution 2

Hi Neeraj,

Try this.

XML

<div>
                <input type="file" name="filUpload" id="filUpload" onchange="showimagepreview(this)" />

<img id="imgprvw" alt="uploaded image preview"/>
            </div>

C#

function showimagepreview(input) {
            alert();
            if (input.files && input.files[0]) {
                var filerdr = new FileReader();
                filerdr.onload = function (e) {
                    $('#imgprvw').attr('src', e.target.result);
                }
                filerdr.readAsDataURL(input.files[0]);
            }
        }

Posted 22-Apr-14 20:29pm

Ajith K Gatty

Updated 22-Apr-14 20:32pm

v2

Comments

neeraj_ 23-Apr-14 2:38am

not working sir

Ajith K Gatty 23-Apr-14 3:09am

i tried it on FireFox. Working perfectly.

Solution 3

Where is it failing? Did you put an alert for input.files and input.files[0] to check the value? Instead try using input.value and check whether you are getting the file path.

Posted 23-Apr-14 9:45am

Abinash_Sahoo

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-04-22T19:57:00

Solution 1

Problem

The problem is, Image1 Control is not declared on the Page.

Solution

Script

HTML

<script type="text/javascript">
    function showimagepreview(input) {
        if (input.files && input.files[0]) {
            var filerdr = new FileReader();
            filerdr.onload = function (e) {
                $('#<%= Image1.ClientID %>').attr('src', e.target.result);
            }

            filerdr.readAsDataURL(input.files[0]);
        }
    }
</script>

HTML

ASP.NET

<asp:FileUpload ID="FileUpload1" runat="server" onchange="showimagepreview(this)" />
<img id="Image1" alt="uploaded image preview" />

Posted 22-Apr-14 19:57pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 22-Apr-14 20:47pm

v2

Comments

neeraj_ 23-Apr-14 2:24am

it's not working sir

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 2:27am

It is perfectly working. Which browser you are testing in?

neeraj_ 23-Apr-14 2:26am

what is the mean of
Image1 Control is not declared on the Page.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 2:27am

See the HTML I have posted... I have posted the Image1 control...

neeraj_ 23-Apr-14 2:41am

i'm also using
<asp:Image ID="Image1" runat="server" Height="164px" Width="171px"
BackColor="Silver">

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 2:45am

Okay, it is also working at my end. I guess it is a ClientID issue. Can you just see the Source HTML of the Page and check what is the ID of that Image control?

If ID is different and not "Image1", then use the updated code in my answer.

neeraj_ 23-Apr-14 2:51am

id is Image1
what me should to do

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 2:54am

It should work. Okay tell me the browser you are using.

neeraj_ 23-Apr-14 2:55am

chrome

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 2:57am

It is working on Chrome. Do you want the sample project?

neeraj_ 23-Apr-14 2:59am

yeah why not

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 3:01am

Okay, wait, I am packing for you. :)

neeraj_ 23-Apr-14 3:01am

are it's working on your system ?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 3:02am

Yes, perfectly...

neeraj_ 23-Apr-14 3:03am

then why not with me

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 3:08am

Download from link - http://ge.tt/8YqT3zc1/v/0?c

Then try it.

neeraj_ 23-Apr-14 3:21am

sir i'm not using this on master page
this is a content page or any problem because of it.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 3:47am

Do you see any error in Developer tool Console window?

neeraj_ 23-Apr-14 4:27am

no

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Apr-14 11:39am

Okay, so tell me how exactly you are doing it. Else just upload your project somewhere and give me the link as I gave you.

neeraj_ 24-Apr-14 1:17am

sir r u there

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 1:26am

Yes Neeraj, tell me. :)

neeraj_ 24-Apr-14 1:30am

link is
http://ge.tt/38vXNHd1/v/1

and form is signUpform

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 1:37am

Ok, I am checking. :)

neeraj_ 24-Apr-14 1:40am

thanks sir

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 1:53am

It is giving me one Assembly error while running.

So, let's do one thing. You put a debugger inside the function and see if it going inside the function or not while you select a file in FileUpload control.

You can set a debugger like...

function showimagepreview(input) {

debugger;

// All other codes....
}

NOTE: Make sure you use the ClientID while setting the Image src as I have done in my updated code.

neeraj_ 24-Apr-14 2:01am

sir please send me whole code
how to use debugger

neeraj_ 24-Apr-14 2:08am

it been done sir
thanks a lot

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 2:22am

Great. :)

neeraj_ 24-Apr-14 2:43am

thanks a lot of
can u help me one more time please

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 3:09am

Sure. Please add another question and give me the link here. :)

neeraj_ 24-Apr-14 3:17am

http://www.codeproject.com/Answers/763804/regular-expression-not-working-on-mozila-firefox#answer1

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 3:19am

Okay, thanks. :)