Question

我使用croppie框架在我的网站上生成新图片。之后，我想将这个新图像传递给我的java servlet。最好的方法是通过形式，但json也会很好。不幸的是，我不知道我该怎么做。

这是创建新图像的代码的一部分：

function popupResult(result) {
  var html;
  if (result.html) {
    html = result.html;
  }
  if (result.src) {
    html = '<img  id="blah" src="' + result.src + '" width="170" height="200" />';
  }

  $('.profilowe').html(html);
}

function cropping() {
  var $uploadCrop;
  function readFile(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
          url: e.target.result
        });
        $('.showPicture').addClass('ready');
      }
      reader.readAsDataURL(input.files[0]);
    }
    else {
      swal("Sorry - you're browser doesn't support the FileReader API");
    }
  }

  $uploadCrop = $('#showPicture').croppie({
    viewport: {
      width: 170,
      height: 220,
      type: 'square'
    },
    boundary: {
      width: 300,
      height: 300
    },
    exif: true
  });

  $('#upload').on('change', function () { if(ValidateSingleInput(this)){readFile(this); }});
  $('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function (resp) {
      popupResult({
        src: resp
      });
    });
  });
}

和html元素:(首先用于生成新图像，第二个用新图像替换）

<input type='file' id="upload"/>
<div class="profilowe">
   <img id="blah" src="blank.jpg"/>
</div>

如何通过表单的提交将图像（<img/>）发送到我的java servlet？

0 个答案: