更新會話

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