Загрузка Изображений С Превью Ajax Php Mysql

Загрузка изображений на сайт – один из важных функционалов, который может быть реализован на языке PHP с помощью технологии AJAX и базы данных MySQL. Одним из превосходных вариантов загрузки изображений на сайт является загрузка с превью. Превью-изображения помогают пользователям понимать, как будет выглядеть изображение после его загрузки.

Чтобы реализовать загрузку изображений с превью, сначала с помощью HTML нужно создать форму загрузки файла. Эта форма должна состоять из поля ввода и кнопки отправки. Вот пример кода:

  <form id="uploadForm" action="upload.php" method="post">
      <input name="upload_file" type="file" /><br>
      <input type="submit" value="Upload Image" name="submit">
  </form>

Следующий шаг - это обработка запроса загрузки файла в PHP. Вот пример кода обработчика, который будет загружать выбранный файл:

  if(isset($_POST["submit"])) {
    $file_name = $_FILES['upload_file']['name'];
    $temp_file_location = $_FILES['upload_file']['tmp_name'];
    $file_path = "uploads/".$file_name;
    if(move_uploaded_file($temp_file_location, $file_path)) {
      echo "File uploaded successfully.";
    } else {
      echo "Error in uploading the file.";
    }
  }

Далее необходимо создать превью изображения и сохранить его в базе данных MySQL. Вот пример кода, который создаст и сохранит превью изображения:

  $original_image = imagecreatefromjpeg($file_path);
  $width = imagesx($original_image);
  $height = imagesy($original_image);
  $thumbnail_size = 150;
  $new_width = $thumbnail_size;
  $new_height = floor($height * ($thumbnail_size / $width));
  $thumbnail = imagecreatetruecolor($new_width, $new_height);
  imagecopyresized($thumbnail, $original_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
  $thumbnail_path = "uploads/thumbnail_".$file_name;
  imagejpeg($thumbnail, $thumbnail_path, 80);
  $query = "INSERT INTO images (image_name, thumbnail_name) VALUES ('".$file_name."', '".$thumbnail_path."')";
  mysqli_query($connection, $query);

Загрузка изображений с превью AJAX, следует использовать технологию jQuery незаменимой для обработки событий на клиентской стороне. Соединение клиентского и серверного кода осуществляется с помощью метода Ajax() библиотеки jQuery. Следующий код будет отправлять Ajax запрос при отправке формы:

  $("#uploadForm").submit(function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
      url: "upload_ajax.php",
      type: "POST",
      data: formData,
      contentType: false,
      cache: false,
      processData:false,
      success:function(data){
        $("#uploadedFile").html(data);
      }
    });
  });

В итоге, загрузка изображений с превью AJAX с PHP и MySQL - это простой и эффективный способ реализации загрузки изображений на ваш сайт.