Ajax file upload with preview

Question

I have a issue with my script not working correctly. What i am trying to achieve is when you browse for a file to upload and select ok to upload the sequence of events should happen as follows:

1. Progress bar move up 30px and fadeIn.
2. Show upload progress.
3. On complete move down 30px and FadeOut.
4. Preview uploaded image fadeIn.
5. Close image and repeat above on new selection.

My script is having problems see below:

1. Progress bar not showing for another upload.
2. progress bar not moving up and fadein.

Service.php

// File object 
$file = $_FILES['photo'];

// File types allowed to be uploaded
$file_types_allowed = array("image/gif", "image/jpeg", "image/jpg", "image/pjpeg", "image/png", "image/x-png");         

// Check if image is allowed
if (in_array($file["type"], $file_types_allowed))  {                
  if ($file["error"] > 0) {
    echo "Return Code: " . $file["error"] . "<br />";
  }
  else {
    // TODO: resize image
    // Save image in uploads folder
    $path = 'uploads/' . $file["name"];

    move_uploaded_file($file["tmp_name"], $path) or error('receiving directory insuffiecient permission', $path);       
    echo $path;
  }

} else {
  // Return error  
  echo "An error has occured - the file is invalid";
}           

?>

Demo: JSFiddle Demo

Answer 1

There's some pretty robust file upload utilities out there already so no need to reinvent the wheel :) Have you checked out the examples for jQuery-File-Upload? (Google it)