Formdata 对象正在转换为 ASP.NET MVC 中的查询字符串

Question

我正在向 MVC 控制器发送 formdata 数据，但是当我发送请求时，有时 formdata 会转换为查询字符串或缺少某些值。

当我在 Chrome 中调试我的代码时，请求会发送到服务器，但有时它不会在请求中包含 cityid 和图像。

这是我的 jQuery 添加函数：

   function add()
    {

        var formdata = new FormData(); 
        var imagefile = $('#imageuploaded')[0].files[0];

        formdata.append('name', $('#name').val());
        formdata.append('lastname', $('#lastname').val());
        formdata.append('address', $('#address').val());
        formdata.append('imageuploaded', imagefile);

        for (var i = 0; i < formvalues.cityid.length; i++)
        {
            formdata.append('cityid['+i+']', formvalues.cityid[i]);

        }

        $.ajax({

            url: "/Practice/insertemployee",
            type: "Post",
            contentType: false,
            processData: false,
            data: formdata,
            success: onsccessinsert,
            error:onerrorinsert

        });
    }

我的控制器：

 public JsonResult insertemployee(People people,HttpPostedFileBase 
imageuploaded)
    {
         var name= imageuploaded.FileName;
         var folderpath = Server.MapPath(@"\Images\");
        string guid = new Guid().ToString();
        var fullpath = folderpath +guid+ name;
        people.fullimagepath = fullpath;
        people.shortimagepath=@"\Images\"+guid+name;
        imageuploaded.SaveAs(fullpath);
        return Json(PracticedbcontexController.insertintodb(people), JsonRequestBehavior.AllowGet);
    }

最后是视图标记：

<form id="peopleform"   enctype="multipart/form-data" >
<div class="form-group">
        <input type="hidden" id="id" />
        <label>name</label>
        <input type="text" class="form-control" id="name" name="name" />
    </div>
    <div class="form-group">
        <label>lastname</label>
        <input type="text" class="form-control" id="lastname" name="lastname" />
    </div>
    <div class="form-group">
        <label>address</label>
        <input type="text" class="form-control" id="address" name="address" />
    </div>
    <select id="listofcities"  onchange="citiesselected()">
        <option value="1">karachi</option>
        <option value="2">hyderabad</option>
        <option value="3">larkana</option>
    </select>
    <div class="form-group">
        <input type="file" id="imageuploaded" name="imageuploaded" class="form-control" />
    </div>
    <ul id="cityid"></ul>
    <button id="submitform" class="btn btn-primary" onclick="add()">submit</button>
</form>

当我向服务器发送请求时，请求被转换为查询字符串而不是 formdata 对象。当我调试并发送请求时，它似乎缺少一些数据。我检查了所有附加到 formdata 的值。

Answer 1

我有几个建议：首先，您可能希望使用更通用的方法，因此您添加 peopleView.cshtml（放置表单的位置）和 peopleController.cs 和 peopleViewModel.cs（封装数据的位置，现在您有了人班）。然后你就拥有了，它应该会变魔术。但是我不确定文件输入部分。因此，据我所知，如果您使用 FormData() 您的控制器必须将每个值作为参数。所以要么你把每个或你的值放在单独的参数中，比如

public JsonResult insertemployee(string name, string lastname, HttpPostedFileBase 
imageuploaded, etc...)

或者您在 javascript 端将所有与人员相关的数据封装到人员对象中：

    var formdata = new FormData(); 
    var imagefile = $('#imageuploaded')[0].files[0];

    var people = {
       'name' = $('#name').val(),
       'lastname' = $('#lastname').val()
    };

    formdata.append('people', people);
    formdata.append('imageuploaded', imagefile);

顺便说一句，您有“name”和“lastname”参数，将“name”重命名为“firstname”以更加一致。

补充：

所以我对 long get 字符串的最佳猜测是，在调用 post 并出现一些错误后，它会尝试返回并使用 get 方法填写表单。这就是为什么在提交后您会返回表单并且 url 具有所有值。您应该有具有两个方法/操作的控制器（它们可能具有相同的名称但具有不同的方法属性 [HttpGet] 和 [HttpPost]）。在发生错误的后期操作中，您应该返回 View() 并将您发布的模型作为参数。我建议你看一些 MVC 教程来更好地理解和学习好的模式和命名约定。

Answer 2

也许这对你有帮助：

var url = "/Practice/insertemployee";

var imagefile = $('#imageuploaded')[0].files[0];
var name = $('#name').val();
var lastname = $('#lastname').val();
var address = $('#address').val();

var formdata = new FormData();
formdata.append('name', name);
formdata.append('lastname', lastname);
formdata.append('address', address);
formdata.append('imageuploaded', imagefile, imagefile.name);

for (var i = 0; i < formvalues.cityid.length; i++)
{
    formdata.append('cityid['+i+']', formvalues.cityid[i]);
}

$.ajax({
    url: url,
    type: "POST",
    data: formData,
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    success: onsccessinsert,
    error: onerrorinsert
});

要添加文件，请使用以下结构：

formdata.append('imageuploaded', imagefile, imagefile.name);

并将 mimetype 设置为：

mimeType: "multipart/form-data",

这将帮助您解决丢失的文件。