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;
?>

所以为了保持简单，我想＆＃34;更新＆＃34;在没有刷新或重定向的情况下提交表单时，此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;
});

提交表单后更新会话

3 个答案: