Member Avatar for tqmd1

Sir, I am using these codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>My Contacts</title>

<style type="text/css">

html {
overflow:auto;
}

body{
background-color:#e7f4fe;
}

#container {
margin: auto;
position:absolute;
background-color:#CFC;
padding:10px;
overflow:auto;
width:150px;
height:150px;
text-align:center;
border:1px solid #09F;
}

.hidden{
    display:none;
    }
</style>

     <body>

        <div id="container">

            <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data">

            <img id="photo" width="100" height="100" src="http://www.w3schools.com/images/compatible_chrome.gif"     style="text-align: center;" /><br>

            <input type="file" name="file" id="file" value="PLEASE CHANGE YOUR IMAGE" class="hidden"></br>

            <a target="photo" onclick="document.getElementById('file').click();"><b>UPLOAD</b></a></br></br> 
            </form>
        </div>
    </body>
 </html>

When I press upload then this image selector appears

[IMG]http://i40.tinypic.com/16m4ozn.jpg[/IMG]

I want to show selected image in current div like shown in above image.

How it will be possible.

(I do not want to upload image in any folder or database, just want to displaly)

Please help

  • 4 Contributors
  • 3 Replies
  • 118 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by vani krishnan
Member Avatar for JorgeM

There's a working demo here on jsfiddle that you can take a look at and adapt to your needs. This allows you to display without actually uploading.

http://jsfiddle.net/LvsYc/

Member Avatar for vani krishnan

You can include a javascript function to it.

inside the function, give

document.getElementById('Id_of_div_whr_u_want2_display_the_img').innerHTML= file;
(ie, the img u hav selected)
Edited by vani krishnan
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.