如何将JavaScript值从视图传递到控制器？

我有一个ASP.NET MVC项目，我正在使用Cropbox.js:jQuery Image裁剪插件裁剪用户的图像，但我找不到如何将裁剪后的图像送到控制器

JavaScript如下所示：

 <script type="text/javascript">
    window.onload = function () {
        var options =
        {
            imageBox: '.imageBox',
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: 'avatar.png'
        }
        var cropper;
        document.querySelector('#file').addEventListener('change', function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                options.imgSrc = e.target.result;
                cropper = new cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        document.querySelector('#btnCrop').addEventListener('click', function () {
            var img = cropper.getAvatar()
            document.querySelector('.cropped').innerHTML += '<img id="Portrait" src="' + img + '">';
        })
        document.querySelector('#btnZoomIn').addEventListener('click', function () {
            cropper.zoomIn();
        })
        document.querySelector('#btnZoomOut').addEventListener('click', function () {
            cropper.zoomOut();
        })
    };
</script>

---

也许可以将img文件从javascript存储到模型中

我不知道jQuery图像裁剪插件，但我认为您需要这样做：

---

获取图像的字节，将其转换为base64，然后使用Ajax Post将其发送到ViewController操作。

我想您可以使用AjaxForm或HtmlForm并将其推送到任何操作。然后使用

FormCollection

查看您的值。例如，在我的验证码生成器中，我覆盖了过滤器的某些操作：

   public class CaptchaValidator : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            RegisterViewModel model = filterContext.ActionParameters["model"] as RegisterViewModel;
            if (filterContext.HttpContext.Session["Captcha"] == null || filterContext.HttpContext.Session["Captcha"].ToString() != model.Captcha)
            {
                filterContext.ActionParameters["captchaValid"] = false;
            }
            else
            {
                filterContext.ActionParameters["captchaValid"] = true;
            }
            base.OnActionExecuting(filterContext);
        }
    }

并在控制器中使用：

[CaptchaValidator]
public async Task<ActionResult> Register(RegisterViewModel model, bool captchaValid)

var file = Request.Form["avatarData"];

[captchavalidater]
公共异步任务寄存器（RegisterViewModel模型，bool captchaValid）

我想您可以在这里将

boolcaptchavalid

更改为您的

字节[]

---

我希望它能帮助您：-）

我的朋友通过添加以下内容解决了此问题：

document.getElementById('avatarData').value = img;

对于脚本的这一部分：

    document.querySelector('#btnCrop').addEventListener('click', function () {
        var img = cropper.getAvatar()                
        document.querySelector('.cropped').innerHTML += '<img src="' + img + '">';             
        //new added
        document.getElementById('avatarData').value = img;
    })

我会得到：

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA..."

---

要使用此字符串，有一个非常有用的问题&答案-

您应该使用修复程序回答自己的问题，然后在一天后将其选择为“已回答”。）

var file = Request.Form["avatarData"];

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA..."