I am passing single base64 string as of now,but Now I need to pass multiple base64 string and sent through PHP script to the server.

as of now my code send only single data

$imagebase64 //it contains base64 array like -['data:image/jpeg;base64,/9j/4A','data:image/jpeg;base64,/9j/4A']

$("#downloadAll").click(function () {
    $.ajax({
        type: "POST",
        url: "imageUpload.php",
        data: {
                // Sending single as of now
                base64Img: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…1jSchh2MkeFK5Anv7fbTv5SKFqOFdOvm764mRVLQgtO8RoP/Z",
            },

        contentType: "application/octet-stream",
        error: function (err) {
            console.log("There was an error. Try again please!", err);
        },
        success: function (msg) {
            console.log(msg);
        },
    });
});

PHP Script

 $base64string = $_POST['data'];
 $uploadpath   = 'image-cropper';
 $parts        = explode(";base64,", $base64string);
 $imageparts   = explode("image/", @$parts[0]);
 $imagetype    = $imageparts[1];
 $imagebase64  = base64_decode($parts[1]);
 $file         = $uploadpath . uniqid() . '.jpeg';
 file_put_contents($file, $imagebase64);

After Updated Code as suggested-

Notice: Undefined index: data in /var/www/html/image-cropper/imageUpload.php on line 1 and empty array() posted to upload.php

Ajax call:

$("#downloadAll").click(function () {
    var imagebase64 = "<?= $imagebase64 ?>";
    $.ajax({
        type: "POST",
        url: "imageUpload.php",
         data: { imagesBase64: JSON.stringify(imagesBase64) },
  contentType: "application/json; charset=utf-8",
            error: function (err) {
            console.log("There was an error. Try again please!", err);
        },
        success: function (msg) {
            console.log(msg);
        },
    });
});

PHP:

$base64string = $_POST['data'];

$uploadpath   = 'image-cropper';
$parts        = explode(";base64,", $base64string);
$imageparts   = explode("image/", @$parts[0]);
$imagetype    = $imageparts[1];
$imagebase64  = base64_decode($parts[1]);
$file         = $uploadpath . uniqid() . '.jpeg';
file_put_contents($file, $imagebase64);

CodePudding user response：

As I understand by your first code - your array has base64 data which is already in strings so no need to convert it again.

  $("#downloadAll").click(function () { 
    $.ajax({
      type: "POST",
       url: "imageUpload.php", 
      data: { data: imagesBase64 }, 
     cache: false,
     error: function (err, data) {
        console.log("There was an error. Try again please!"   data, err);
     },
     success: function (data) {
        console.log(data);
   },
 });
});

As I saw your PHP script has a lot of issues, it was made only to handle a single item, you need to iterate over the array too.

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

 foreach($data as $base64_string ){
 
   $filename_path = md5(time().uniqid()).".jpeg"; //use png or jpg if required

   $base64_string = str_replace('data:image/jpeg;base64,', '', $base64_string);

   $base64_string = str_replace(' ', ' ', $base64_string);
   $decoded = base64_decode($base64_string);

   //defining path 
   file_put_contents("image-cropper".$filename_path,$decoded);

 }