如何通过 ajax 请求处理 Post 数据和一个文件

Question

我想发送带有 ajax 请求的多参数。例如：id=1,name="amin",logo:file。在我的操作中，id 类型是 int，Name 类型是 String，Logo Type 是 HttpPostfileBase。

var ID = $("#OfficeId").val();
if (ID == "") {
  var imagefile1 = $("#fileInput")[0].files[0];
  alert(imagefile1.name);
  $.ajax({
    url: '@Url.Action("Create", "Administration")',
    data: { ID: ID, Name: $("#Name").val(), ManagerName: $("#ManageName").val(), UserName: $("#UserName").val(), Password: $("#Password").val(), Address: $("#Address").val(), Wage: $("#Wage").val(), Logo: imagefile1 },
    type: "POST",
    processData: false,
    contentType: false,
    enctype: 'multipart/form-data',
    success: function (result) {           
      if (result.Success) {
        alert(result);
      }
      eval(result.Script);
    },
    error: function () {
      alert("خطا!");
    }
  });
}

但是这个代码对我不起作用。如果我从 ajax 请求中删除徽标（一个文件参数），请求就可以正常工作。我的问题只是徽标（文件参数）。

Answer 1

您可以像下面这样使用 javascript 的 FormData 对象的概念：

你可以把所有的表单交给formData处理

var formData = new FormData();
formData.append('ID', $("#OfficeId").val());
formData.append('Name', $("#Name").val());
formData.append('image', $("#fileInput")[0].files[0]);

Ajax 使用 jQuery 的请求将如下所示：

$.ajax({
    url: 'Your url here',
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    enctype: 'multipart/form-data',
    success: function (result) {

                if (result.Success) {
                   alert(result);
                }
                eval(result.Script);
            },
            error: function () {
                alert("خطا!");
            }

})

Answer 2

先添加一个按钮 : 这个函数的点击事件会将id值发送给ajax调用，你会根据ID值获取数据。

<button type="button" onclick="Edit(@model.ID)">Edit</button>

编辑（ID）功能：

 function Edit(Get_Id) {
    var name1 = $('#ID1').val();  // save required values to send to another file
    var name2 = $('#ID2').val();

    $.ajax({

        method: 'Post',
        url: '@Url.Action("Edit","Home")', // method name & controller name.
        data: { id: Get_Id, Column_Name1: name1, Column_Name2: name2}, // bind data to column names and send to method.
        success: function () {
            alert("Data Sent")
        }
    })
}

如何通过 ajax 请求处理 Post 数据和一个文件

How to Post data and one file to action with a ajax requset

jquery

asp.net-mvc

httppostedfilebase

jquery-ajaxq