將裁剪后的圖像發送到數據庫ajax​​在客戶端和服務器上的PHP上

Question

我正在嘗試使用客戶端上的Javascript和服務器上的PHP將圖像上傳到數據庫。

• 從圖庫中選擇第一張圖像。
• 縮放和裁剪后，圖像將傳遞到數據庫

問題是當iam嘗試提交裁剪的圖像值時沒有傳遞給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

首先，看看這個： 我可以將圖像表單數據傳遞給PHP函數進行上傳嗎？

我認為問題在於： 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 () {}
        });
    });
});

編輯

在您的示例中，您從未為input定義name或id屬性，因此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 () {}
        });
    });