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

Question

i want send a multi parameter with a ajax request . for example : id=1,name="amin",logo:file . id type is int and Name type is String and Logo Type is HttpPostfileBase in my action .

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("خطا!");
    }
  });
}

But this Code Not Work For Me. if i remove Logo(a file parameter) from ajax request, Request is work Fine. My Problem is Just Logo(a file Parameter).

with ajax request it's difficult to achieve this. you can better use some plugins like "jquery form" http://malsup.com/jquery/form/#options-object — Frebin Francis, May 27 '16 at 09:55
can you add your controller code also ? have you checked in debugging mode that you are receiving image file in ajax call data block or not ? — Harshil Shah, May 27 '16 at 10:37

score 2 · Accepted Answer · answered May 27 '16 at 09:57

2

You can use the concept of FormData object of javascript like below:

You can give to the formData all form for processing

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

Ajax request with jQuery will looks like this:

$.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("خطا!");
            }

})

answered May 27 '16 at 09:57

somprabhsharma

323
2
12

#somprabhsharma i change My code to your code but Ajax request can not call create action.?! – Amin Saadati 2 May 27 '16 at 10:44
i get error from js file : Jquery.js – Amin Saadati 2 May 27 '16 at 10:51
work for me. Thank You – Amin Saadati 2 May 27 '16 at 16:49
Please mark it as an answer and upvote it. – somprabhsharma May 29 '16 at 18:12

score 0 · Answer 2 · answered May 27 '16 at 10:29

Add a button first : click event of this fuction will send value of id to ajax call & you will get data based on ID value.

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

Edit(ID) function :

 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")
        }
    })
}

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

2 Answers2