Question

I want to upload an image without refreshing page. please help me for this purpose. I find many thing but ever

Answer 1

Complete Script :

you need ajax to do it and here some code to work for u :

ajaximage.php

Contains PHP code.
This script helps you to upload images into uploads folder.
Image file name rename into timestamp+session_id.extention

<?php

include('db.php');

session_start();

$session_id='1'; // User session id

$path = "uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
  $name = $_FILES['photoimg']['name'];
  $size = $_FILES['photoimg']['size'];
  if(strlen($name)) {
    list($txt, $ext) = explode(".", $name);
    if(in_array($ext,$valid_formats)) {
      if($size<(1024*1024)) // Image size max 1 MB
      {
        $actual_image_name = time().$session_id.".".$ext;
        $tmp = $_FILES['photoimg']['tmp_name'];
        
        if(move_uploaded_file($tmp, $path.$actual_image_name)) {
          mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
          echo "<img src='uploads/".$actual_image_name."' class='preview'>";
        }
        else
          echo "failed";
      }
      else
        echo "Image file size max 1 MB";
    }
    else
      echo "Invalid file format..";
  }
  else
    echo "Please select image..!";
  exit;
}
   ?>

index.php

Contains simple PHP and HTML code.
Here $session_id=1 means user id session value.

<?php
include('db.php');
session_start();
$session_id='1'; // User login session value
?>




<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>

  Upload image <input type="file" name="photoimg" id="photoimg" />

</form>

<div id='preview'>
</div>

Sample database design for Users.

Users
Contains user details username, password, email, profile_image and profile_image_small etc.

CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)

Javascript Code

$("#photoimg").on('change',function(){}) 
// photoimg is the ID name of INPUT FILE tag and 

$('#imageform').ajaxForm()
//imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method.  

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
  $(document).ready(function()
  {
    $('#photoimg').on('change', function()
    {
      $("#preview").html('');
      $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
      $("#imageform").ajaxForm(
      {
        target: '#preview'
      }).submit();
    });
  });
</script>