无法使用js将文件值发送到asp.net mvc中的控制器

我这里有点问题。我无法通过js将文件输入的内容发送到控制器，我正在使用“ croppie”插件在提交之前重新缩放图片大小。在完全使用此js插件之前，我可以提交文件并保存，但现在不再保存，但是现在，我提交了模型中的所有值，但没有文件。我对js不好，请帮助我。

这是输入和提交代码

 <div class="col-md-10">
      <input type="file" name="ImageUpload" id="ImageUpload" value="Select an image" />
      <div id="upload"></div>
      <input type="hidden" id="productImage" name="productImage">
 </div>

<div class="form-group">
      <div class="col-md-offset-2 col-md-10">
            <a href="#" class="upload-form btn btn-pry">Add Product</a>
      </div>
</div>

这是croppie插件代码

<script type="text/javascript">
    $(document).ready(function () {
        var $uploadCrop;

        function readFile(input) {
            $uploadCrop = $('#upload').croppie({
                viewport: {
                    width: 270,
                    height: 350,
                    type: 'square'
                },
                boundary: {
                    width: 310,
                    height: 400
                }
            });

            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $uploadCrop.croppie('bind', {
                        url: e.target.result
                    });
                    $('.upload').addClass('ready');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $('#ImageUpload').on('change', function () { readFile(this); });
        $('.upload-form').on('click', function () {
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'original'
            }).then(function (resp) {
                $('#productImage').val(resp);
                $('.form').submit();
            });
        });

    });
</script>

我的控制器中有此操作

 public ActionResult AddProduct(ProductVM model, HttpPostedFileBase file)
 {
     //.... some codes here
 }