file upload serialize jquery without form

Question

how to send image file data with jquery ajax in a table without using a form attribute

i am using serialize this but file data is not in payload

$('.upload').on('click', function() {   
    var mdata = $(this).closest('tr').find("input, select, textarea").serialize();
     $.ajax({
       url: "../../../uploadimage",
       data:mdata,
       timeout:false,
       type:'POST',
       dataType:'JSON',
       success:function(res){
         ...
         }
       });
     });

while for other text input attributes run normally

Question unclear ! what is the relation with datatables tag ? — SelVazi, Jan 29 '23 at 18:14

DLK · Answer 1 · 2023-01-29T04:13:38.773

You need to use formData to post images with ajax.

If you have to use closest, then you should use both together.

Here is an example :

$(document).ready(function(){
  $(".upload").submit(function(e){
    e.preventDefault();    
    var [form] = $(this).closest('form');
    var formData = new FormData(form);
    $.ajax({
    url:'../../../uploadimage',
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
      success: function(data) {
          ...
      }
    });
  });
});

If you dont have to use closest, then this is your answer : how to do file upload using jquery serialization

file upload serialize jquery without form

1 Answers1