带预览的Ajax文件上传

Question

我的脚本无法正常运行时出现问题。 我想要实现的是当您浏览要上传的文件并选择确定上传时，事件序列应如下所示：

1. 进度条向上移动30px并淡出。
2. 显示上传进度。
3. 完全向下移动30px和FadeOut。
4. 预览上传的图片fadeIn。
5. 关闭图片并在新选择上重复上述内容。

我的脚本遇到问题见下文：

1. 进度条未显示其他上传内容。
2. 进度条没有向上移动并且褪色。

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

?>

演示：JSFiddle Demo

Answer 1

已经有一些相当强大的文件上传实用程序，所以不需要重新发明轮子:)你有没有检查过jQuery-File-Upload的例子？ （谷歌）