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（）做到这一点，但我认为这样可行。

在没有刷新的情况下在div上传图像和预览 - PHP / AJAX

2 个答案: