업데이트 세션 양식을 제출 한 후

Question

이 세션을 고려

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

이 세션 변수로 데이터베이스의 사용자 이미지를 표시하는 이미지입니다! 그러나 내 사이트에서 업로드 이미지 양식으로 사용자 그림을 변경하면 사용자 그림이 업데이트되고 있지만 이전 그림은 내 페이지를 새로 고칠 때까지 유지됩니다 ...이 문제를 해결하기 위해 페이지를 새로 고치지 않으려 고합니다. 난 내 행동에 리디렉션하지 iframe을 대상

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

주의 사항 ... 여기

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

그래서

양식이 상쾌하지 않고 제출 또는 리디렉션 할 때 I가 "갱신"이 에코 IMG 태그를 싶습니다 간단하게하는 ..

어떤 아이디어로이 문제를 해결할 수 있습니까?

Answer 1

이

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

.

귀하의 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입니다. 파일을 업로드하고 업로드가 완료되면 콜백을 트리거합니다. 이것은 생각만큼 똑바로 앞으로하지 않습니다.

이 플러그인을 사용하여 시도해야합니다 : 링크뿐만 아니라 위키에 당신은 당신이 원하는 것을 달성하기 위해 AJAX를 사용할 필요가

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