CODEWITHSUNDEEP
phpjquery
Dipak
Dipak

Reputation: 939

How to upload multiple base64 encoded images in php

$('.image-editor').each(function(){
  $(this).cropit();
});
$('.export').click(function(){
  var category = [];
  $("input[name='category']:checked").each(function(){
    category.push(this.value);
	});
  var imageData = [];
  $('.image-editor').each(function(){
      imageData.push( $(this).cropit() );
  });
  $.ajax({
      url: "upload.php",
      type: "POST",
      data: {
      imageData: imageData,
      category: category
    },
      success: function (result){
        alert(result);
    }
  });
});
.col100{
  width:100%;
}
.left{
  float:left;
}
.mbottom10{
  margin-bottom:20x;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.image-editor{
	width: 100%;
	float:left;
}
.cropit-preview {
  float:left;
  background-color: #f8f8f8;
  background-size: cover;
  width: 200px;
  height: 150px;
}
.cropit-preview-image-container {
  cursor: move;
}
.image-size-label {
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.min.js"></script>
<html>
<head>
</head>
<body>
  <section class="col100 left mbottom10">
    <input type="checkbox" name="category" value="1"> Slide
    <input type="checkbox" name="category" value="2" id="gallery"> Gallery
    <input type="submit" name="submit" class="export" />
	</section>
  <div class="clearfix"></div><br/>
  <article class="image-editor">
    <input type="file" class="cropit-image-input" /><br/>
    <input type="range" class="cropit-image-zoom-input" /><br/>
    <section class="cropit-preview"></section><br/>
   </article>
   <div class="clearfix"></div><br/>
  <article class="image-editor">
    <input type="file" class="cropit-image-input" /><br/>
    <input type="range" class="cropit-image-zoom-input" /><br/>
    <section class="cropit-preview"></section><br/>
   </article>
</body>
</html>

I am trying to upload multiple base64 encoded image to server, but it is uploading only first one. After passing multiple image forming array through ajax with the help of @ZakariaAcharki, I've tried foreach loop in php. But, only one and first image is uploading and submitting !, Is following process and code is wrong according to ajax data provided in fiddle ?

foreach ($_POST["imageData"] AS $key => $category){
    $img = substr(explode(";",$category)[1], 7);
    $imgnm = time().'.jpg';
    $folder = '../images/slide/'.$imgnm;
    file_put_contents($folder, base64_decode($img));
}

Upvotes: 1

Views: 1202

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67495

Working fiddle.

Is it possible to store each value of same CSS class in an array?

Yes, this is possible try to add it directly to the array, like :

var imageData = [];

$('.image-editor').each(function(){
    imageData.push( $(this).cropit('export') );
});

Upvotes: 1

Related Questions