Как обновить аватарку в режиме реального времени без кнопки отправки

Question

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

Например, если вы выбираете изображение своего профиля, например, в Facebook, оно автоматически обновляется без необходимости нажмите другую кнопку отправки. Я пишу свое приложение в PHP и JavaScript, но в основном PHP. Это мой код для функции обновления аватара.

$msg = "";
  $msg_class = "";
  $conn = mysqli_connect("localhost", "root", "", "micro");
  if (isset($_POST['save_profile'])) {
    // for the database
    $bio = stripslashes($_POST['bio']);
    $profileImageName = './propics/avatar.jpg';
    // For image upload
    $target_dir = "propics/";
    $target_file = $target_dir . basename($profileImageName);
    // VALIDATION
    // validate image size. Size is calculated in Bytes
    if($_FILES['profileImage']['size'] > 200000) {
      $msg = "Image size should not be greated than 200Kb";
      $msg_class = "alert-danger";
    }
    // check if file exists
    if(file_exists($target_file)) {
      $msg = "File already exists";
      $msg_class = "alert-danger";
    }
    // Upload image only if no errors
    if (empty($error)) {
      if(move_uploaded_file($_FILES["profileImage"]["tmp_name"], $target_file)) {
        $sql = "UPDATE users SET propic='$profileImageName' WHERE uname='admin'";
//$sql = "INSERT INTO users SET propic='$profileImageName'";
        if(mysqli_query($conn, $sql)){
          $msg = "Image uploaded and saved in the Database";
          $msg_class = "alert-success";
        } else {
          $msg = "There was an error in the database";
          $msg_class = "alert-danger";
        }
      } else {
        $error = "There was an erro uploading the file";
        $msg = "alert-danger";
      }
    }
  }

Ниже мой html код ввода

Answer 1

Вы должны использовать Ajax, чтобы сохранить свое изображение аватара без загрузки страницы, или вы можете сказать «живая» загрузка. Следуйте приведенному ниже примеру кода. Вы также можете проверить на inte rnet вы найдете много примеров.

$('#inputFile').change(function(){
  startUpload();
});

function startUpload(){

$.ajax({
url: "ajax_php_file.php", // Url to which the request is send
type: "POST",             // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false,       // The content type used when sending data to the server.
cache: false,             // To unable request pages to be cached
processData:false,        // To send DOMDocument or non processed data file it is set to false
success: function(data)   // A function to be called if request succeeds
{
$('#loading').hide();
$("#message").html(data);
}
});

ajax_php_file. php

$sourcePath = $_FILES['file']['tmp_name'];       // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ;    // Moving Uploaded file
return "successfully uploaded";