Как отобразить изображение после загрузки в php Обработать запрос AJAX на той же странице

Я пытаюсь создать инструмент для обрезки изображений, он должен загрузить изображение, обрезать его и распечатать на странице как изображение.png, а не как базу 64 (данные: изображение). Насколько я знаю, это невозможно сделать через HTML и JavaScript. Поэтому я пытался сделать это через PHP. Я загружаю и обрезаю изображение, но не могу отобразить загруженное изображение, когда я обрезаю изображение, создается два файла .png. одно из них нормальное изображение, второе из них 0-байтовое изображение ошибки (и каждый раз, когда страница обновляется, она создает это 0-байтовое изображение ошибки).

Как я могу это исправить?

<html lang = "en">
<head>
  <title>PHP and jQuery - Crop Image and Upload using Croppie plugin</title>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>

  <meta name = "csrf-token" content = "{{ csrf_token() }}">
</head>

<body>
<div class = "container">
  <div class = "card" style = "max-height: 500px;">
    <div class = "card-header bg-info">PHP and jQuery - Crop Image and Upload using Croppie plugin</div>
    <div class = "card-body">

      <div class = "row">
        <div class = "col-md-4 text-center">
        <div id = "upload-demo"></div>
        </div>
        <div class = "col-md-4" style = "padding:5%;">
        <strong>Select image to crop:</strong>
        <input type = "file" id = "image">

        <button class = "btn btn-success btn-block btn-upload-image" style = "margin-top:2%">Upload Image</button>
        </div>

        <div class = "col-md-4">
        <div id = "preview-crop-image" style = "background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div>
        </div>
      </div>

    </div>
  </div>
</div>


<script type = "text/javascript">


var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,    
    viewport: { // Default { width: 100, height: 100, type: 'square' } 
        width: 200,
        height: 200,
        type: 'circle' //square
    },
    boundary: {
        width: 300,
        height: 300
    }
});


$('#image').on('change', function () { 
  var reader = new FileReader();
    reader.onload = function (e) {
      resize.croppie('bind',{
        url: e.target.result
      }).then(function(){
        console.info('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
});


$('.btn-upload-image').on('click', function () {
  resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (img) {
    $.ajax({
      type: "POST",
      data: {"image":img},
      success: function (data) {
        html = '<img src = "' + img + '" />';
        $("#preview-crop-image").html(html);
      }
    });
  });
});


</script>
<?php
{
if (isset($_POST['image'])){

$image = $_POST['image'];
list($type, $image) = explode(';',$image);
list(, $image) = explode(',',$image);

$image = base64_decode($image);
$image_name = time().'.png';
file_put_contents('uploads/'.$image_name, $image);

echo 'successfully uploaded';
            display_image();
}
 function display_image(){
  ?>
  
    <img src = "<?php echo "uploads/". $image_name; ?>" width = "70" height = "70" >

  <?php
  }
  }
?>

</body>
</html>

Ваш php-код выполняется при каждом запросе страницы. Это означает, что $_POST['image'] пуст в запросах GET. Попробуйте проверить, существует ли $_POST['image']. Изображение, вероятно, не отображается, потому что вы используете $image_name при загрузке и $image['name'] при загрузке изображения в <img>

— 30.01.2019 16:45

Привет, теперь он не создает 0-байтовое изображение при каждом обновлении, но все равно не отображает изображение

— 30.01.2019 19:00

Вы проверили папку загрузки и увидели, что изображение было загружено?

— 12.02.2019 20:57

javascript php jquery html ajax

30.01.2019 15:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Другие вопросы по теме

Jquery Ajax на HTML-странице для обработки данных публикации Codeigniter

Мои переменные сеанса не переносятся на разные страницы

Обновить таблицу MySQL из таблицы PHP

Экспорт ассоциативного массива в CSV, включая нули и заголовки из каждого массива

Передача данных в виде массива — PHP

Как сделать так, чтобы нажатие кнопки получало атрибут данных в своем собственном div?

Как я могу выбрать два разных параметра выбора на одной странице и получить их значения

Как я могу получить значение style="display:none" с помощью метода POST в PHP

Отправка электронной почты с вложением CSV через PHPMailer

Как выполнить PhantomJS из PHP удаленно через браузер

Как отобразить изображение после загрузки в php Обработать запрос AJAX на той же странице

Другие вопросы по теме

Похожие вопросы