表单具有enctype ="multipart/form-data".但请求内容类型是application/x-www-form-urlencoded;字符集= UTF-8 [英] Form has enctype="multipart/form-data" but Request Content-Type is application/x-www-form-urlencoded; charset=UTF-8

问题描述

我在ASP.Net MVC4中使用Html帮助器有一个基本表单.我有一个用于上载文件的表单中的输入文件，该文件将被添加到数据库中.在我的视图模型中，我具有输入文件的属性:

I have a basic form in ASP.Net MVC4 using Html helpers. I have an input file in the form for uploading a file which will be added to a database. In my view model I have a property for the input file:

        public HttpPostedFileBase AssetFile { get; set; }

我认为我有表单助手:

@using (Html.BeginForm("Create", "Contact", FormMethod.Post, new { enctype = "multipart/form-data" }))

在我的表单内:

@Html.TextBoxFor(model => model.AssetFile, new { @type = "file", @name = "AssetFile" })

但是，当我发布表单时，Request.Files中没有文件.然后我注意到在Fiddler中，请求标头具有Content-Type:application/x-www-form-urlencoded; charset = UTF-8.我还有一个带有输入文件的表单，并且标题具有Content-Type:multipart/form-data; boundary = ---- WebKitFormBoundaryCfBFSR0RXQRnasfb，这种形式的效果很好.我尝试在没有HTML帮助程序的情况下执行此操作，并且发生了相同的事情.视图模型本身继承了输入文件实际上所属的另一个视图模型，但是随后我将一个字符串属性映射到了一个文本框，并且表单正在拾取该值.没有嵌套表单(在此页面上，这是唯一的表单)，但是我对另一个具有多个表单(非嵌套)的页面也存在相同的问题，该页面使用包含这样的表单的多个部分视图:

Yet, when I post the form there are no files in the Request.Files. Then I noticed that in Fiddler the Request Header has Content-Type: application/x-www-form-urlencoded; charset=UTF-8. I have another form with an input file and the header has Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryCfBFSR0RXQRnasfb and this form works fine. I tried doing this without Html helpers and same thing happens. The view model itself inherits from another view model where the input file actually belongs but then I have a string property mapped to a textbox and the form is picking up this value. There is no nested forms (on this page this is the only form) but I am having the same problem with another page that has multiple form (not nested) using multiple partial views that contain the forms like this:

@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { @enctype = "multipart/form-data" })){ @Html.Partial("EditorTemplates/_Profile", Model.InstitutionProfileInformation)}

在此先感谢您的帮助.

好-这很奇怪.由于它们(原始编码器)使用局部视图，因此它们将这件事废止了.呈现部分视图(带有表单)时:

OK - Here's the weirdness. Since they're (the original coder(s)) using partial views they ajaxified this thing. When the partial view (with the form) is rendered:

    var loadContactDiv = function (e) {
    isChanged = false;
    var url = e.href;
    $("#Contacts").load(url, function (response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
        }

        $("#Contacts").find('form').submit(divSubmitHandler).change(function () {
            isChanged = true;
        });

        $("#ReturnButton").click(function () {
            loadContacts();
        });
    });
    return false;
};

然后，当用户单击提交按钮时:

Then when the user click the submit button:

    var divSubmitHandler = function () {
    var form = $("#Contacts").find('form');
    var test = form.serialize();

    debugger;
    $.ajax({
        url: (form).attr('action'),
        data: form.serialize(),
        type: "POST",
        success: function (data) {
            if (data == "") {
                loadContacts();
            } else {
                $("#Contacts").html(data);

                $("#Contacts").find('form').submit(divSubmitHandler).change(function () {
                    isChanged = true;
                });
                $("#ReturnButton").click(function (e) {
                    loadContacts();
                });
            }
        }
    });

    return false;
};

仍然卡住: http://prntscr.com/20v2cp

推荐答案

由于您没有提交表单，而是使用 $.ajax 来远程处理请求，然后获取结果，即enctype从表单本身被忽略.

Since you are not submitting the form, but using $.ajax to process the request remotely and then get the result, the enctype is ignored from the form itself.

您还可以看到表单数据已序列化并发送.

As you can also see the form data is serialize and sent.

所以这里的修复很简单，要正确提交内容类型，只需添加

So the fix here is simple, to submit the content-type correctly, just add a

内容类型

像这样的ajax请求选项，

option to the ajax request like so,

var divSubmitHandler = function () {
    var form = $("#Contacts").find('form');
    var test = form.serialize();

    debugger;
    $.ajax({
        url: (form).attr('action'),
        **contentType: 'multipart/form-data',**
        data: form.serialize(),
        type: "POST",
        success: function (data) {
            if (data == "") {
                loadContacts();
            } else {
                $("#Contacts").html(data);

                $("#Contacts").find('form').submit(divSubmitHandler).change(function () {
                    isChanged = true;
                });
                $("#ReturnButton").click(function (e) {
                    loadContacts();
                });
            }
        }
    });

    return false;
};

这应该可以解决问题.但是，如果它不起作用，请参考Jquery Form Ajax提交.

This should do the trick. However if it does not work, please refer to Jquery Form Ajax submit.

jQuery AJAX提交表单

会议愉快！

这篇关于表单具有enctype ="multipart/form-data".但请求内容类型是application/x-www-form-urlencoded;字符集= UTF-8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！