Question posted in
You can find the official documentation here.

Ajax how to pass array it has file list (.NET CORE / AJAX / JQUERY) – Jquery ajax

I have a array in jquery. And i have a file list in view.
I want to put this file list into my array and pass my controller/action
I find some ways but dont work.
there is my jquery

var Data = new FormData();
        $('input[data-fileid=1]').each(function () {
            var FileData = $(this).get(0).files[0];
            Data.append("Attachments", FileData);
        });
        var arr = {
            Code: "examplecode",
            Id: 1
            FileList: Data
        };
        $.ajax({
            data: JSON.stringify(arr),
            url: '/Panel/PD',
            datatype: 'json',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
        });```

and I don't know how to keep this data in class.
Tags:

2

Answers


  1. 0

    So your ajax should send data that required in controller,

    $.ajax({ 
            url: '/Panel/PD',
            datatype: 'json',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
      traditional: true, // required to send an array on controller
      data: { 'arrayOfValues': JSON.stringify(arr)} ,
      error: function() { console.log('lets track error here'); } // check if you get any error 

             
 });

    Controlller will look like:

    [HttpPost]
public void PD(List<string> arrayOfValues) //should get your files data here
{
    // do stuff here
}
    Login or Signup to reply.
  2. 0

    When sending binary file data in an AJAX request you cannot send data as a serialised string. It needs to be contained within a FormData object.

    From there, you need to set the contentType and processData to false within the $.ajax() settings so that jQuery doesn’t attempt to change the request content or the content-type header. Try this:

    var Data = new FormData();
Data.append('Code', 'examplecode');
Data.append('Id', 1);

$('input[data-fileid=1]').each(function() {
  var FileData = $(this).get(0).files[0];
  Data.append("Attachments", FileData);
});

$.ajax({
  url: '/Panel/PD',
  type: 'POST',
  data: Data,
  contentType: false,
  processData: false, 
  success: response => {
    console.log('handle the response here...');
  }
});

    On the server side you can use the Request.Files collection to iterate through the file data in the request as normal – assuming you haven’t extended the default ModelBinder to receive binary data.

    Also note that a simpler way to build the FormData object is to pass a reference to the form element to the constructor. All data within the controls of the form will then be appended to the object. If you want to append custom data to this, use hidden input controls within the HTML.

    var data = new FormData($('#myForm')[0]);

    This avoids the need to manually append() any magic strings in your JS logic.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search