提交表单后更新会话

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

使现代化php示例

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

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

你知道我怎么解决这个问题吗？

Answer 1

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

下面是示例代码

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

Answer 2

实际上...这个问题并不像你想象的那么简单。你想上传一个文件，然后一旦上传完成，触发一个回调。这并不像人们想象的那样简单。

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

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

还有一个指向wiki的链接

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

Answer 3

您需要使用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>';
}

如果出现问题，查看控制台日志，了解问题出在哪里。