Clever Geek Handbook

Send cropped image to ajax database on client and PHP on server

I am trying to upload an image to a database using Javascript on the client and PHP on the server.

  • The first image is selected from the gallery.
  • after scaling and cropping the image is transferred to the database

The problem is iam trying to pass the cropped image value is not passed to php, the actual loaded input "File" Value is Passed, but I need to pass the cropped areas value to PHP.

For testing purposes, if all the js are needed, I can provide it.

Upload snapshot image

Js: Crops an image

$(function() {
        $('.image-editor').cropit({
          exportZoom: 1.25,
          imageBackground: true,
          imageBackgroundBorderWidth: 40,

    });

    $('.export').click(function() {
      var imageData = $('.image-editor').cropit('export');
      window.open(imageData);
    });
  });

HTML:

 <form id="uploadForm" class="image-editor">
      <input type="file" class="cropit-image-input">
      <!-- .cropit-image-preview-container is needed for background image to work -->
      <div class="cropit-image-preview-container">
        <div class="cropit-image-preview"></div>
      </div>
      <div class="image-size-label">
        Resize image
      </div>
      <input type="range" class="cropit-image-zoom-input">
      <input type="submit" class="export">Export</input >
    </form>

Ajax: ajax send data to php

$(document).ready(function (e) {

    $("#uploadForm").on('submit', (function (e) {
        e.preventDefault();
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) {
                $("#targetLayer1").html(data);
            },
            error: function () {}
        });
    });
});

PHP:

 if(count($_FILES) > 0) {
        if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
           $mysl = mysqli_connect("localhost", "root", "root","test");

            $imgData =addslashes(file_get_contents($_FILES['userImage']['tmp_name']));
            $imageProperties = getimageSize($_FILES['userImage']['tmp_name']);

            $sql = "UPDATE output_images SET imageType  ='{$imageProperties['mime']}',imageData= '{$imgData}' WHERE imageId='16'";
            $current_id = mysqli_query($mysl,

$sql) or die("<b>Error:</b> Problem on Image Insert<br/>" . mysqli_error());;
            if(isset($current_id)) {
                echo "done";
            }
        }
        }
+3


source to share


1 answer


First, take a look at this: Can I pass image form data to a PHP function to upload?

I think the problem here: var imageData = $('.image-editor').cropit('export');

. Since this new image is never part of the form, it is not possible to submit it via AJAX. In your JS / JQuery, I would suggest:

var imageData = '';
$(function() {
    $('.image-editor').cropit({
        exportZoom: 1.25,
        imageBackground: true,
        imageBackgroundBorderWidth: 40,
    });

    $('.export').click(function() {
        imageData = $('.image-editor').cropit('export');
        window.open(imageData);
    });
});
$(document).ready(function (e) {
    $("#uploadForm").on('submit', (function (e) {
        e.preventDefault();
        var fd = new FormData(this);
        fd.append( imageData, file );
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: fd,
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) {
                $("#targetLayer1").html(data);
            },
            error: function () {}
        });
    });
});

EDIT

In your example, you never defined an attribute name

or id

for yours input

, so PHP could not index the global $_FILES

. I could try $_FILES[0]

. I would suggest assigning this in yours form

or when posting it.



You can customize myFormData.append(name, file, filename);

. So it would be:

fd.append('crop-image', imageData, 'crop-image.jpg');

Then in PHP you call it with $_FILES['crop-image']

. If you want to pass the filename from the form:

$(document).ready(function (e) {
    $("#uploadForm").on('submit', (function (e) {
        e.preventDefault();
        var fd = new FormData(this);
        var origFileName = $("input[type='file']").val();
        var startIndex = (origFileName.indexOf('\\') >= 0 ? origFileName.lastIndexOf('\\') : origFileName.lastIndexOf('/'));
        var filename = origFileName.substring(startIndex);
        if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0){
            filename = filename.substring(1);
        }
        var cropFileName = "crop-" + filename;
        fd.append('crop-image' imageData, cropFileName );
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: fd,
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) {
                $("#targetLayer1").html(data);
            },
            error: function () {}
        });
    });
+1


source






More articles:


All Articles