1

I have an idea and would like to try it out. I am using a cool tool called cropit. I need to upload multiple images, crop them automatically and save them on the server side. Unfortunately I can process only one image at a time and I have 12 separate fields for the upload and preview. The current code for the 5th image for example looks like this:

HTML:

<div id="image-cropper5">

    <!-- This is where user selects new image -->

    <label> Upload Photo <input type="file" class="cropit-image-input"/></label>

    <!-- This is where the preview image is displayed -->

    <label><div class="cropit-preview"></div></label>

    <!-- This is the confirmation -->

    <button type="button" id="image5pick" disabled>OK</button>

</div>

JQuery:

$('#image-cropper5').cropit();

$('#image5pick').click(function() {
    var imageData5 = $('#image-cropper5').cropit('exportZoom', 3);
    imageData5 = $('#image-cropper5').cropit('export');
    $.post('php/upload.php', { imageData5: imageData5 }, function() { $('#image5pick').data('clicked', true) })
});

PHP:

$imageData5 = $_POST["imageData5"];

if ($_POST["imageData5"]){
    $decoded = $imageData5;
    $exp = explode(',', $decoded);
    $base64 = array_pop($exp);
    $data = base64_decode($base64);
    $file = "data5.png";
    file_put_contents($file, $data);
}

What I want to try out is to upload multiple images via <input name="photos[]" type="file" class="multiupload" multiple/>, take every image from the array and process every image automatically and separately through the codes (also without the "OK" confirmation, just process as soon as the preview comes on).

So the first question here: How do I take the files seperately to the jquery code?

PLAYCUBE
  • 795
  • 4
  • 14
  • 24
  • You could try to use [multithreading in PHP](http://stackoverflow.com/questions/70855/how-can-one-use-multi-threading-in-php-applications) but I'd recommend to try another less complicated way: instead of uploading an array of images via ``, create a short JS to iterate over the images and upload them one by one using AJAX calls. Each image would then be handled by the same PHP script using parallel connections on the browser side. – SaschaM78 Jan 14 '17 at 16:43
  • Can you give me an example on how to iterate over the images? I also just realized, that this approach is maybe to complicated and since I don't need a visible cropping tool, I could just upload the image and crop it in the php script. It's always a rectangular image. The only thing I must consider is to center the the rectangle and have aspect ratio for different sizes – PLAYCUBE Jan 14 '17 at 23:02

0 Answers0