更新会话

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

因此，要保持它的简单，我想“升级”这个回声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

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

下面是示例代码

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

Answer 3

其实... the problem is not as trivial as you might think。你想上传一个文件，然后一旦上传完成，触发一个回调。这不像人们想象的那样直截了当。

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

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

有一个链接到维基以及

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