Загрузить изображение и просмотр в 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 и загружаемых работ. Но мой вопрос: у меня есть div в HTML-странице, где уже есть изображение, выбранное php. Я бы загрузил новое изображение и заменил его без обновления страницы. Я бы загрузил изображение, и после загрузки я увидел, что новое изображение изменится на предыдущее. Я не знаю, как это сделать. Я не знаю, как я могу использовать AJAX в этом контексте. Я бы, очевидно, контролировал ошибки, которые делает php во время загрузки.

Я бы нажал только на кнопку, которая выбирает изображение, загружает это изображение, а затем меняет изображение с новым загруженным изображением без какого-либо обновления.

Спасибо: D

Answer 1

Вы могли бы взглянуть на JQuery File Upload: 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 выглядит Оке, после того, как Succes вам нужно повторить путь изображения. Успех «data» var был бы тем путем, по которому вам следовало бы просто заменить старый образ, используя jQuery. Я не уверен, что вы можете сделать это только с .HTML(), но я думаю, что это сработает.