使用jQuery AJAX调用将图像发布到MVC操作 [英] Posting an image using a jQuery AJAX call to an MVC action

问题描述

我有以下代码:

$("#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]作为参数传递，但是尝试执行解决方案

您可以执行以下操作 在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"];
}

I have the following code:

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

Which uses this element:

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

Which tries to post an image to this MVC action:

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

Unfortunately, when I post, I get Uncaught TypeError: Illegal invocation in Chrome's logs. This error comes from the jQuery side of things according to the stack trace. There's nothing wrong with $("#color-picker").val() nor with $("#fileInput")[0].files[0] when I check them in Chrome Developer Tools' watch before the call happens (one is a string with the appropriate color code, the other is a File).

I did troubleshoot it to find the reason why this happens. It is because I try to pass $("#fileInput")[0].files[0] as a parameter, but I get the same error when I try to do it this way by appending the file. I am using the latest version of Chrome and I've been researching into a way to pass an image quite a bit. I have been checking lots of questions on Stack Overflow to try to find a solution but so far I could not find a good way to upload this file.

Does anyone know what kind of security concern causes file uploads to not be allowed like this and how I can upload an image in a similar fashion, or by what means I will have to do so? What alternatives are there? I can't seem to make anything work so far that I've come across on Stack.

解决方案

you could do something like this in 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!");
        }
    });

on controller you can get image like this

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

这篇关于使用jQuery AJAX调用将图像发布到MVC操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！