使用jQuery AJAX调用向MVC操作发布图像

我有以下代码：

$("#preview").click(function () { $.ajax({ type: 'POST', url: '@Url.Action("Preview")', data: { color: $("#color-picker").val(), logo: $("#fileInput")[0].files[0] }, success: function (data) { alert("Success!"); }, dataType: "json" }); }); 

哪个使用这个元素：

尝试将图像发布到此MVC操作：

 [HttpPost] public async Task Preview(string color, HttpPostedFileBase logo) { return Json("Success."); } 

不幸的是，当我发帖时，我得到了Uncaught TypeError: Illegal invocation Chrome的日志中的Uncaught TypeError: Illegal invocation 。 根据堆栈跟踪，这个错误来自jQuery方面。 $("#color-picker").val() $("#fileInput")[0].files[0] $("#color-picker").val()和$("#fileInput")[0].files[0]在我打开电话之前在Chrome Developer Tools的手表中检查它们时没有任何问题（一个是一个带有相应颜色代码的string ，另一个是File ）。

我对它进行了故障排除，以找出发生这种情况的原因。 这是因为我尝试将$("#fileInput")[0].files[0]作为参数传递，但是当我尝试通过附加文件这样做时，我得到了同样的错误。 我正在使用最新版本的Chrome，我一直在研究如何传递图像。 我一直在检查Stack Overflow上的很多问题，试图找到一个解决方案，但到目前为止我找不到上传这个文件的好方法。

有谁知道什么样的安全问题导致文件上传不允许这样，以及我如何以类似的方式上传图像，或者我将以什么方式上传？ 有什么替代品？ 到目前为止，我似乎无法做任何工作，因为我遇到了Stack。

Answer 1

你可以在javascript中做这样的事情

 var fd = new FormData(); var files = $("#fileInput").get(0).files; if(files.lenght > 0){ fd.append("logo",files[0]); } $.ajax({ type: 'POST', url: '@Url.Action("Preview")', data:fd, processData: false, contentType: false, dataType: "json", success: function (data) { alert("Success!"); } }); 

在控制器上你可以得到像这样的图像

 if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any()) { var picture = System.Web.HttpContext.Current.Request.Files["logo"]; }