Thread: Image in div

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    16
    Rep Power
    0

    Image in div


    Dear Sir,

    I am using these codes
    PHP Code:
        <!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 codes work fine but....
    I need this result

  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    184
    Rep Power
    31
    Allow me to rewrite your blocks w/ comments, below.

    With that, I see that HTML upload <form> needs to be placed right @ the red line,
    while a new HTML <img> should be created for the new image in blue, yes?
    Code:
    <body>
    	<div id="container">
    <?php
    if (!empty($_POST['submit'])){
    	//method is by POST --> try check file type,
    	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)){
    		//file is of ALLOWED TYPES --> try check file upload mechanism error,
    		if ($_FILES["file"]["error"] > 0){
    			//file upload error --> echo error. done.
    		}
    		else{
    			//NO file upload error --> try check same file in /upload folder,
    			if (file_exists("upload/" . $_FILES["file"]["name"])){
    				//same file found --> echo "file exists". done.
    			}
    			else{
    				//NO same file found:
    				//--> move file to upload folder,
    				//--> create HTML image. done.
    			}
    		}
    	}
    	else{
    		//file is NOT one of ALLOWED TYPES --> echo "invalid file". done.
    	}
    }
    else{
    	//method is NOT by POST --> echo HTML upload form. done.
    }
    ?>		
    	</div>
    </body>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    16
    Rep Power
    0
    Sir I have rewrote code as

    <!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;
    }

    .hide{
    display:none
    }
    </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>

    <?php

    if (!empty($_POST['submit'])){
    //method is by POST --> try check file type,
    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)){
    //file is of ALLOWED TYPES --> try check file upload mechanism error,
    if ($_FILES["file"]["error"] > 0){
    //file upload error --> echo error. done.
    }
    else{
    //NO file upload error --> try check same file in /upload folder,
    if (file_exists("upload/" . $_FILES["file"]["name"])){
    //same file found --> echo "file exists". done.
    }
    else{
    //NO same file found:
    //--> move file to upload folder,
    //--> create HTML image. done.
    }
    }
    }
    else{
    //file is NOT one of ALLOWED TYPES --> echo "invalid file". done.
    }
    }
    else{
    //method is NOT by POST --> echo HTML upload form. done.
    }
    ?>
    </body>
    </html>

    but it is showing these errors

    On this line no 52
    && ($_FILES["file"]["size"] < 20000) && in_array($extension, $allowedExts)){
    it says:
    Notice: Undefined variable: extension in C:\wamp\www\Photo\index2.php on line 52
    Warning: in_array() expects parameter 2 to be array, null given in C:\wamp\www\Photo\index2.php on line 52
    Call Stack
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    184
    Rep Power
    31
    Of course
    I was trying to point out just 2 things, of where the <form> and one new <img> should be placed, logically. In other words, use your own original codes, but pay attention the blocks I suggested.

IMN logo majestic logo threadwatch logo seochat tools logo