can't get any file data, It shows file data empty

Question

I did this for uploading files via ajax. But I can't get any file data. It shows file data empty.

Here is my ajax part.

    $("#personal_image").on('click',function(event) {
        event.preventDefault();
        var datastring = $("#personal_image").serialize();

        console.log(datastring);

        $.ajax({
            type: "POST",
            url: location.origin+"/user/parsonal_image_submit/",
            secureuri       :false,
            fileElementId   :'user_image',
            data: datastring,
            dataType: "json",
            success: function(data) {
                //success               },
            error: function() {
                //error
            }
        });
    })

Answer 1

Check below code. Hope it will work for you. Please use on form submit rather then using on click.

$('#your_form_id').on('submit',function(e){
 e.preventDefault();
 var formdata = new FormData($(this)[0]);
 var url = $('#personal_image').attr('action');
 $.ajax({
  url: url,
  type: 'post',
  data: formdata,
  dataType: 'json',
  processData: false,
  contentType: false,
  //async: false,
  success: function(data){
   //success
  }
 });
});