Question

以前，我只需要创建一个只包含要发送到操作而不是图像的数据的表单，现在，我已经面临要求将数据与图像一起发送到行动。我不知道如何将图像附加到数据中，以便我可以让它继续进行操作。

这就是我将数据和图片一起发布的方式，但我收到的是null：

HTML

<input type="file" id="profilePic" name="file" value="Browse">
<input type="text" id="EmployeeCode" name="EmployeeCode" value="EmployeeCode">
<input type="text" id="SystemCode" name="SystemCode" value="SystemCode">
<input type="button" value="Create" onclick="SaveEmpData()" />

我知道如何获取输入类型文本数据并通过ajax请求以json格式发送并将其保存到数据库，但是当以json格式通过ajax请求获取数据和图像时，我和＃39;对于如何做到这一点毫无头绪。

JS

var empdata = { "SystemCode": "", "EmployeeCode": "" };

empdata.EmployeeCode = $("#EmployeeCode").val();
empdata.SystemCode = $("#SystemCode").val();

var data = new FormData();
var files = $("#profilePic").get(0).files;    
data.append("Image", files[0]);

的Ajax

$.ajax({
    url: '/EmployeeMasterA/Create',
    headers: headers,
    data: JSON.stringify({ employeeMasterA: empdata, profilePic: data }),
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    traditional: true,
    success: function (result) {

        if (result.Success == "1") {
            window.location.href = "/EmployeeMasterA/Index";
        }
        else {
            alert(result.ex);
        }
    }
});

和Create行动：

[HttpPost]
public ActionResult Create([Bind(Include = "SystemCode,EmployeeCode")] EmployeeMasterA employeeMasterA, HttpPostedFileBase profilePic)
{            
    var pic = System.Web.HttpContext.Current.Request.Files["Image"];
}

在上面的代码中，pic变量为null。我的问题是：

从表单中获取数据+图像的正确方法是什么，并通过ajax请求将其发送到操作？非常感谢任何帮助：）

更新

在提到liran的回答之后，我尝试通过这种方式编辑代码来进行绑定：

JS

var empbind = { "profilePic" : "", "employeeMasterA" : "" };
// Created empdata and data (image) object as mentioned above
empbind.employeeMasterA = empdata;
empbind.profilePic = data;
var empbindjson = JSON.stringify(empbind);

并更改了 Ajax data参数，如下所示：

$.ajax({
   .
   .
   data: empbindjson,
   .
   .
});

并更改了我的控制器操作：

[HttpPost]
public ActionResult Create([Bind(Include = "employeeMasterA,profilePic")]       EmployeeBind bind)
{            
    var pic = System.Web.HttpContext.Current.Request.Files["Image"];
}

在上述代码的调试模式下，employeeMasterA,profilePic都收到null，这是我的新绑定类：

public class EmployeeBind
{
    public EmployeeMasterA employeeMasterA { get; set; }
    public HttpPostedFileBase profilePic { get; set; }
}

好的，现在，我已经更改了我的代码以将其与profilePic绑定，是否有任何我做错的事情？因为create bind的{{1}}参数对employeeMasterA和profilePic都包含null。

Answer 1

尝试改变需要工作的东西：

  $('#save').click(function () {

    var form = $("#yourForm");
    var data = new FormData();
    var files = $("#profilePic").get(0).files;
    data.append("Image", files[0]);
    $.each(form.serializeArray(), function (key, input) {
        data.append(input.name, input.value);
    });

  $.ajax({
      url: '/EmployeeMasterA/Create',
      data: data,
      type: 'POST',
      processData: false,
      contentType: false,
      success: function (result) {

          if (result.Success == "1") {
              window.location.href = "/EmployeeMasterA/Index";
          }
          else {
              alert(result.ex);
          }
      }
  });
});

在Html中：

 <form id="yourForm">
    <input type="file" id="profilePic" name="file" value="Browse">
    <input type="text" id="EmployeeCode" name="EmployeeCode" value="EmployeeCode">
    <input type="text" id="SystemCode" name="SystemCode" value="SystemCode">
    <input type="button" value="Create" onclick="SaveEmpData()" id="save">
</form>

编辑：如果仍然无效，请将EmployeeMasterA和HttpPostedFileBase绑定到同一个类，如：

    [HttpPost]
    public ActionResult Create([Bind(Include = "SystemCode,EmployeeCode")] VMNewClass bind)
    {            
        var pic = System.Web.HttpContext.Current.Request.Files["Image"];
    }


public class VMNewClass{

 public EmployeeMasterA employeeMasterA {get;set;}
 public  HttpPostedFileBase profilePic {get;set;}

}

如果您不想这样做：

 $.each(form.serializeArray(), function (key, input) {
        data.append(input.name, input.value);
    });

你可以写：

var data = new FormData();
    var files = $("#profilePic").get(0).files;
    data.append("profilePic", files[0]);
    data.append("EmployeeCode", $("#EmployeeCode").val());
    data.append("SystemCode", $("#SystemCode").val());

编辑我附在评论中的文章

 <script>
        var empdata = { "SystemCode": "", "EmployeeCode": "" };

        empdata.EmployeeCode = $("#EmployeeCode").val();
        empdata.SystemCode = $("#SystemCode").val();

        var data = new FormData();
        var files = $("#profilePic").get(0).files;
        data.append("Image", files[0]);
        data.append("EmployeeCode", $("#EmployeeCode").val());
        data.append("SystemCode", $("#SystemCode").val());

        $.ajax({
            url: '/EmployeeMasterA/Create',
            data: data,
            type: 'POST',
            contentType: false, // Not to set any content header  
            processData: false, // Not to process data  
            success: function (result) {

                if (result.Success == "1") {
                }
                else {
                    alert(result.ex);
                }
            }
        });

</script>

控制器：

[HttpPost]
public ActionResult Create([Bind(Include = "SystemCode,EmployeeCode")] EmployeeMasterA employeeMasterA)
{            
    HttpPostedFileBase profilePic = Request.Files[0]; // your file
}

如何通过asp.net mvc中的ajax json一起发送数据和图像

1 个答案: