如何将View中的JavaScript值传递给Controller？

我有一个ASP.NET MVC项目，我使用的是Cropbox.js：jQuery Image Crop Plugin - http://www.jqueryrain.com/demo/jquery-crop-image-plugin/来裁剪用户的图像，但我找不到如何将裁剪后的图像发送到控制器。如何将View中的JavaScript值传递给Controller？

的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>

我试图用控制器以下，但由于I'm请求文件，我不确定是否它甚至可以工作：

HttpPostedFileBase file = Request.Files["Portrait"];

也许有可能将img文件从javascript存储到模型中？

来源

2014-10-01 Velusoid

你应该用你的修补程序回答你自己的问题，然后选择它作为一天后的“回答”。 :) – code4coffee 2014-10-02 15:10:06

噢，好的，谢谢。 – Velusoid 2014-10-02 15:43:47

我的朋友已经加入以下解决它：

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; 
    })

然后使用隐形输入查看形式：

<input type="hidden" id="avatarData" name="avatarData" value="">

现在我可以赶上它的控制器：

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

而且I'll得到：

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

要使用此字符串的工作，有一个非常有用的问题&答案 - MVC Convert Base64 String to Image, but ... System.FormatException

来源

2014-10-02 15:54:35 Velusoid

我不知道jQuery的图片裁剪插件，但我认为你需要做这样的事情：

获取图像的字节，将它们转换为Base64，然后使用Ajax将其发送到视图控制器动作帖子。

来源

2014-10-01 21:48:55

我可以使用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)

我认为你可以在这里你byte[]变化bool captchaValid。

我希望它可以帮助你:-)

来源

2014-10-01 21:55:54 W92

如何将View中的JavaScript值传递给Controller？

回答

相关问题