将裁剪后的图像发送到客户端的数据库ajax和服务器上的PHP

Question

我试图上传一个图像到数据库使用Javascript在客户端和PHP在服务器上。

• 从图库中选择第一个图像。
• 缩放和裁剪后，图像被传递到数据库。

问题是，当iam试图提交裁剪的图像值时，没有将实际上传的输入"File“值传递给PHP，但我需要将裁剪区域值传递给php。

为了测试的目的，如果需要所有的js，我可以提供它。

​

​

Js:这幅画长出了图像

$(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将数据发送给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";
            }
        }
        }

Answer 1

首先，看看这个：Can I pass image form data to a PHP function for upload?

我认为问题就在这里：var imageData = $('.image-editor').cropit('export');。由于这个新映像从来不是表单的一部分，所以无法通过AJAX传递它。在您的JS/JQuery中，我建议：

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 () {}
        });
    });
});

编辑

在您的示例中，您从未为您的name或id属性定义过一个input属性，因此PHP无法为$_FILES全局索引。可以试试$_FILES[0]。我建议在您的form中或在您发布它时分配它。

您可以调整myFormData.append(name, file, filename);。所以应该是：

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

然后在PHP中，使用$_FILES['crop-image']调用它。如果您想从表单中传递文件名：

$(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 () {}
        });
    });