在沒有刷新的情況下上傳圖像和預覽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與新上傳的圖片沒有任何刷新。

謝謝：d

Answer 1

你可以看看jQuery的文件上傳：http://blueimp.github.io/jQuery-File-Upload/

Answer 2

事實上，你需要使用AJAX。 你可以用下面這段代碼：

<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看起來奧凱，更迭後，您需要回聲圖像的路徑。成功的'data'var將成爲你現在回顯的路徑，只需要使用jQuery替換舊圖像即可。我不確定您是否只能使用.HTML（）來做到這一點，但我認爲這會起作用。