Как получить изображение BLOB из formData jquery ajax в php

Question

Я делаю всплывающее окно ajax для загрузки изображения в файловую систему. Процесс загрузки изображения имеет следующие этапы.

1. Выбор файла и обрезка его до нужного размера.
2. результат изображения отображается в <img> тег src в качестве кода Base64.
3. преобразование Base64 в Blob, чтобы отправить через AJAX

Вот код ...

$(document).ready(function(){ 
     $('#btn_save').on('click', function() { 
      var PaymentStatus = $("#PaymentStatus").val(); 
      var image = $('#image-id').val(); 

      var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, ""); 
      var blob = base64ToBlob(base64ImageContent, 'image/png'); 
      var formData = new FormData(); 
      formData.append('picture', blob); 
      formData.append('PaymentStatus', PaymentStatus); 
      $.ajax({ 
        data: formData, 
        url:"/login/advshop/add", 
        method: 'GET', 
        processData: false, 
        contentType: false, 
        success: function (result) { 
         alert("form submitted"); 
       }, 
       error: function (result) { 
         alert('error'); 
         //alert(result); 
       } 
     }); 
    }); 
}); 

, но я не могу получить данные в мой контроллер ..

public function add() { 
    print_r($_POST['picture']); 
} 

и сообщение об ошибке есть ..

Сообщение: Undefined индекс: фото

Answer 1

смотрите мой ответ ..

 $(document).ready(function() { 


     $('#btn_save').on('click', function() { 
      var image = $('#image-id').val(); 
      var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, ""); 
      var PaymentStatus = $("#PaymentStatus").val(); 
      var formData = new FormData(); 
      formData.append('image', base64ImageContent); 
      formData.append('PaymentStatus', PaymentStatus); 



      $.ajax({ 
       data: formData, 
       url: "/login/advshop/add", 
       method: 'POST', 
       processData: false, 
       contentType: false, 
       success: function (result) { 
        alert("form submitted"); 
       }, 
       error: function (result) { 
        alert('error'); 
        //alert(result); 

       } 
      }); 
     }); 
    }) 

В контроллере.

public function add() { 


     $data = base64_decode($_POST['image']); 


     file_put_contents('images/test.jpg', $data); 
    } 

вы можете напрямую передавать содержание изображения Base64 с помощью AJAX с помощью FormData append.decode содержания base64 и положили его в file_put_contents() функцию.

Answer 2

я думаю, что проблема в том, что вы хотите конвертировать загруженное изображение в base64 строку, а затем вы хотите передать эту строку в контроллер с помощью Ajax ..is его брат ..

Answer 3

Я тоже столкнулся с этой проблемой. Сначала возьмите скрытое поле в своей форме и дайте id и значение для скрытого поля, так как значение скрытого поля - это преобразованная строка. Затем вы можете легко получить значение hiddenfield ie base64 string в переменной в js by getElementById, то передайте переменную контроллеру. Там вы можете получить доступ через $ _POST ['id of hiddenfield']. то вы можете сохранить значение в базе данных напрямую с помощью функции save().

Answer 4

Да, нет необходимости преобразовывать base64 в строку..base64 возвращает строку, поэтому вы используете эту строку для значения скрытого поля.