이미지를 업로드하고 새로 고치지 않고 div에서 미리보기 - PHP/AJAX

Question

PHP로 양식을 업로드하는 방법을 알고 있습니다. 이것은 내 PHP 코드입니다 :

<?php 

    include('include/db.inc.php'); 

    if(!isset($_SESSION)) 
    { 
     session_start(); 
    } 

    if(isset($_SESSION['username'])) 
    { 
     $username = $_SESSION['username']; 
     $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); 
     $max_size = 200 * 1024; 
     $path = "../php/data/users/".$username."/"; 

      if ($_SERVER['REQUEST_METHOD'] === 'POST') 
      { 
       if(!empty($_FILES['image'])) 
       { 
        $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION)); 

         if(in_array($ext, $valid_exts) && $_FILES['image']['size'] < $max_size) 
         { 
          $path = $path . 'profile.jpg'; 

          if (move_uploaded_file($_FILES['image']['tmp_name'], $path)) 
          { 
           $sql = 'UPDATE users SET img_src = "profile.jpg" WHERE username_crypt = "'.$username.'"'; 
           $result = mysql_query($sql) or die("Query error: ".mysql_error()); 
           echo("Success"); 
          } 
         } 
         else 
         { 
          echo ("InvalidFile"); 
         } 
       } 
       else 
       { 
        echo ("FileNotUploaded"); 
       } 
      } 
      else 
      { 
       echo ("BadRequest"); 
      } 
    } 

?> 

업로드가 끝나면 업로드 된 이미지를 PHP로 가져 와서 업로드합니다. 하지만 내 질문은 : HTML 페이지에서 div가 이미 PHP에 의해 선택된 이미지가 있습니다. 새 이미지를 업로드하고 페이지를 새로 고침하지 않고이를 바꿉니다. 나는 이미지를 업로드 할 것이고 업로드 후에 나는 새로운 이미지가 이전 것을 바꿀 것이라고 볼 것이다. 내가 어떻게 할 수 있는지 모르겠다. 이 컨텍스트에서 AJAX를 어떻게 사용할 수 있는지 알 수 없습니다. 난 분명히 PHP는 업로드하는 동안 만드는 오류를 제어합니다.

이미지를 선택하고 해당 이미지를 업로드 한 다음 새로 고침없이 새로 업로드 한 사진으로 이미지 div를 변경하는 버튼 만 클릭합니다.

감사합니다 : 당신은 jQuery를 파일 업로드를 살펴 수

Answer 1

D : http://blueimp.github.io/jQuery-File-Upload/

Answer 2

는 사실, 당신이 AJAX를 사용해야합니다. 당신은 아래에이 코드를 사용할 수 있습니다 succes에 후 이미지의 경로를 반향 할 필요가

<script> 
    $.ajax({ 
     type: "POST", 
     url: "YOUR-PHP-URL", 
    data: YOUR-DATA, 
     success: function(data){ 
      $('YOUR-DIV').HTML(HERE-YOUR-NEW-IMAGE); 
     }, 
     error: function(data){ 
      Do-SOMETHING-IF-YOU-WANT 
     } 
    }) 
</script> 

귀하의 PHP는 해두 보이는합니다. 성공한 '데이터'var은 jQuery를 사용하여 이전 이미지를 대체하기 만하면되는 경로입니다. 나는 당신이 .HTML()로만 그것을 할 수 있는지 모르겠지만 이것이 작동 할 것이라고 생각합니다.