How do I upload the selected image to my Java code on form submit()?

I just want to select the part of the image & upload that to my Java code (Struts Action) when the form submits.

How can I achieve this?

This is my code

 <head>
  <link  href="${pageContext.request.contextPath}/cropper/cropper.min.css" rel="stylesheet">
  <script src="${pageContext.request.contextPath}/cropper/cropper.min.js"></script>
</head>
    <div>
<html:form action="/image/main.do" acceptCharset="UTF-8"  enctype="multipart/form-data" method="post">
            <div>
                <input type="file" name="imgFile" id="imgFile" onchange="readURL(this);"/>
                <div class="image_container">
                    <img id="blah" src="#" alt="your image" />
                </div>
            </div>
</html:form>

<script type="text/javascript" defer>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
            setTimeout(initCropper, 1000);
        }
    }
    function initCropper(){
        var image = document.getElementById('blah');
        var cropper = new Cropper(image, {
          aspectRatio: 1 / 1,
          crop: function(e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
          }
        });

    }
</script>
</div>

fengyuanchen / cropper

How do I upload the selected image to my Java code on form submit()? #1085