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

首先，看看这个：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 () {} }); });

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

1 个答案:

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

1 个答案:

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