上传图像并在div上预览，不需要刷新- PHP / AJAX

Question

我知道如何在php中通过表单上传图像。这是我的php代码：

<?php

    include('include/db.inc.php');

    if(!isset($_SESSION)) 
    { 
        session_start();
    }

    if(isset($_SESSION['username']))
    {
        $username = $_SESSION['username'];
        $valid_exts = array('jpeg', 'jpg', 'png', 'gif');
        $max_size = 200 * 1024; 
        $path = "../php/data/users/".$username."/"; 

            if ($_SERVER['REQUEST_METHOD'] === 'POST')
            {
                if(!empty($_FILES['image']))
                {
                    $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));

                        if(in_array($ext, $valid_exts) && $_FILES['image']['size'] < $max_size)
                        {
                            $path = $path . 'profile.jpg';

                            if (move_uploaded_file($_FILES['image']['tmp_name'], $path))
                            {
                                $sql = 'UPDATE users SET img_src = "profile.jpg" WHERE username_crypt = "'.$username.'"';
                                $result = mysql_query($sql) or die("Query error: ".mysql_error());
                                echo("Success");
                            }
                        }
                        else
                        {
                            echo ("InvalidFile");
                        }
                }
                else
                {
                    echo ("FileNotUploaded");
                }
            }
            else
            {
                echo ("BadRequest");
            }
    }

?>

上传后，我采取被上传的图像由php和上传工作。但我的问题是:我在HTML页面中有一个div，其中已经有一个由php选择的图像。我会上传新的图像，并在不刷新页面的情况下替换它。我会上传图片和上传后，我会看到新的图像改变了以前。我不知道我怎么能做到。我不知道如何在这个上下文中使用AJAX。显然，我会控制php在上传过程中产生的错误。

我只会点击一个按钮选择图像，上传该图像，然后用新上传的图片更改图像div，而不需要刷新.

谢谢:D

Answer 1

您可以查看jQuery文件上传：http://blueimp.github.io/jQuery-File-Upload/

Answer 2

实际上，您需要使用AJAX。您可以在下面使用以下代码：

<script>
    $.ajax({
        type: "POST",
        url: "YOUR-PHP-URL",
    data: YOUR-DATA,
        success: function(data){
            $('YOUR-DIV').HTML(HERE-YOUR-NEW-IMAGE);
        },
        error: function(data){
            Do-SOMETHING-IF-YOU-WANT
        }
    })
</script>

你的PHP看起来很酷，在成功之后，你需要回显图像的路径。成功中的'data‘var将是您响应的路径，您现在只需要使用jQuery替换旧图像。我不确定您是否只能使用.HTML()来完成这个任务，但我认为这样做是可行的。