Question

我有以下代码：

$("#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"
    });
});

使用此元素：

<input id="fileInput" type="file" />

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

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

不幸的是，当我发帖时，我会在Chrome的日志中获得Uncaught TypeError: Illegal invocation。根据堆栈跟踪，这个错误来自jQuery方面。当我在调用发生之前在Chrome开发者工具的手表中查看$("#color-picker").val()或$("#fileInput")[0].files[0]时，string或File没有任何问题（一个是带有适当颜色代码的$("#fileInput")[0].files[0]，另一个是{ {1}}）。

我对它进行了排查，以找出发生这种情况的原因。这是因为我尝试将{{1}}作为参数传递，但是当我尝试通过附加文件来this way时，我得到了同样的错误。我正在使用最新版本的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"];
}

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

1 个答案: