Dear 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;
top:0;left:0;right:0;bottom:0;
background-color:#CFC;
padding:10px;
overflow:auto;
width:300px;
height:300px;
}

</style>

 <body>

<div id="container">

 <form action="" method="post"
 enctype="multipart/form-data">
 <img align="middle name="photo" width="100" height="100"  src="http://www.w3schools.com/images/compatible_chrome.gif"><br>

 <input type="file" name="file" id="file" value="PLEASE CHANGE YOUR IMAGE "></br>
 <input type="submit"  name="submit" value="Submit">
 </form>
</div>
 </body>
 <?php
 if (!empty($_POST['submit']))
 {
 $allowedExts = array("gif", "jpeg", "jpg", "png");
 $temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
 if ((($_FILES["file"]["type"] == "image/gif")
 || ($_FILES["file"]["type"] == "image/jpeg")
 || ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
 || ($_FILES["file"]["type"] == "image/png"))
 && ($_FILES["file"]["size"] < 20000)
 && in_array($extension, $allowedExts))
   {
   if ($_FILES["file"]["error"] > 0)
     {
     echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
     }
   else
     {

     if (file_exists("upload/" . $_FILES["file"]["name"]))
       {
       echo $_FILES["file"]["name"] . " already exists. ";
       }
     else
       {
       move_uploaded_file($_FILES["file"]["tmp_name"],
       "upload/" . $_FILES["file"]["name"]);
     //  echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
       }
     }
   }
 else
   {
     echo "Invalid file";
   }
   ?>
<img src='upload/<?php echo $_FILES["file"]["name"];?>'>
   <?php
   }
 ?> 
 </html>

These code work fine but...
I need this result
http://i42.tinypic.com/j7qm1i.jpg

Recommended Answers

So essentially you want to use jquery to update a div with the image you have just uploaded?

Jump to Post

All 3 Replies

So essentially you want to use jquery to update a div with the image you have just uploaded?

if the chrome image in the correct place, as iamthwee suggests, you javascript or jQuery to change the source attribute of the image element.

here --> <img align="middle name="photo" width="100" height="100" src="http://www.w3schools.com/images/compatible_chrome.gif" />

Dear IMTHEWEE

You wrote:
So essentially you want to use jquery to update a div with the image you have just uploaded?

Yes sir, I want to show uploaded image in same div.

Be a part of the DaniWeb community

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