提交表单后更新会话

Question

考虑这次会议：

echo '<img src = "'.$_SESSION['userpic'].'" class = "changepic">';

这是一张在数据库中显示用户图像的图像，带有会话变量！但是在我的网站中，我正在使用上传图片表单更改用户图片，用户图片正在更新，但旧图片一直存在，直到我刷新我的页面......我想避免刷新页面来解决这个问题......

    <form action = "upload.php" id = "bildUppladdning"  method = "post" enctype = "multipart/form-data" target = "hiddenFrame">
    <input type = "file" name = "file" id = "fileToUpload" accept="image/*" style = "display:none" onchange="form.submit()">
    </form>

请注意，我的目标 iframe 不会被重定向到我的操作...

if(isset($_FILES['file']) ){

move_uploaded_file($_FILES['file']['tmp_name'],'files/'.$_FILES['file']['name']);

session_start();
$username = $_SESSION['user'];
$userpic = 'files/'.$_FILES['file']['name'];
$id = $_SESSION['id'];

include ("connect.php");
$sql = $con->prepare('UPDATE users SET username=?, userpic=? WHERE id = ?');
$sql->bind_param("ssi",$username,$userpic,$id);
$sql->execute(); 
$sql->close();
$con->close();  
$_SESSION['userpic'] = $userpic;
}
else{
$_SESSION['checked'] = '<div class = "check"> NO</div>';}

这是我的上传表单，你可能不需要，但还是把它放在这里...

例如：

$("#fileToUpload").on('submit', function(response)
{
$.ajax({
url: "update.php"
});
return false;
});

Update.php 示例

<?php 
 $_SESSION['userpic'] = $row->userpic;
?>

所以为了简单起见，我想在提交表单时“更新”这个 echo img 标签而不刷新或重定向..

有什么办法可以解决这个问题吗？

Answer 1

你需要使用 AJAX 来实现你想要的。

您的 HTML 不太合理，或者您忘记向我们提供更多信息。必须有一种方法来选择文件。无论出于何种原因，您的 HTML 代码都隐藏了文件输入按钮。所以让我们假设它没有被隐藏：

<input type="file" id="fileToUpload" accept="image/*">

首先，使用 jQuery 将onchange 事件处理程序附加到您的文件输入按钮。在处理程序中，我们会将选定的文件存储在 FormData 对象中，这是使用 AJAX 发送文件所必需的。

$('#fileToUpload').change(function () {
    var file = this.files[0];
    console.log('file', file);

    var formData = new FormData();
    formData.append('file', file);

    $.ajax({
        type: 'post'
        url: "upload.php",
        cache: false,
        contentType: false, // important
        processData: false, // important
        data: formData,     // important
        success: function (res) {
            console.log('response (url)', res);
            $('.changepic').attr('src', res);
        }
    });
});

其次，我们的 AJAX 请求的预期响应是 URL，因此我们还需要更改您的 PHP 脚本。

// not within the scope of the question, but you need to do additional checks
if (isset($_FILES['file'])){
    $userpic = 'files/'. $_FILES['file']['name'];
    move_uploaded_file($_FILES['file']['tmp_name'], $userpic);

    session_start();
    $username = $_SESSION['user'];
    $id = $_SESSION['id'];

    include "connect.php";
    $sql = $con->prepare('UPDATE users SET username= ?, userpic=? WHERE id = ?');
    $sql->bind_param("ssi", $username, $userpic, $id);
    $sql->execute(); 
    $sql->close();
    $con->close();

    $_SESSION['userpic'] = $userpic;

    // important: output ONLY (and i mean ONLY) the path of your newly uploaded pic
    // the output of your script is the AJAX response that will be returned back in your JavaScript
    echo $userpic;
} else {
    $_SESSION['checked'] = '<div class = "check"> NO</div>';
}

如果出现问题，请查看控制台日志以了解失败的位置。

Answer 2

实际上...the problem is not as trivial as you might think。您要上传文件，然后在上传完成后触发回调。这并不像人们想象的那么简单。

你应该尝试使用这个插件：

https://github.com/blueimp/jQuery-File-Upload

还有一个 wiki 的链接

https://github.com/blueimp/jQuery-File-Upload/wiki

Answer 3

如果您想更改来自会话变量的当前图片而不使用页面刷新。 您需要通过 javascript 或 jquery 方法更改属性。

这里是示例代码

$("#fileToUpload").submit(function(response)
{
    $.ajax({url: "update.php",});
    document.getElementsByClassName("changepic").src= response.fullImagePath;
    return false;
});