How to send images via Ajax?

Question

JavaScript

The image block is

<span class="btn btn-primary fileinput-button">
                    <i class="fa fa-fw fa-camera"></i>
                     <input type="file" name="files[]" multiple="" accept="image/jpeg, image/png, image/gif" id="basicUploadFile">
                    </span>

This is how it doesn't work
'files': $("#basicUploadFile").val(),

$("#confirm").on('click', function() {

    var data = {
        'message': $("#message").val(),
        'ques': $("#ques").val(),
        'name_music': $("#who_music").val(),
        'name_film': $("#who_film").val(),
        'name_doc': $("#who_doc").val(),
        'files': $("#basicUploadFile").val(),
        'token': $("#token").val(),
        'name': $("#name").val(),
        'search_music': $("#search_result_mu").val(),
        'video_chekboks': $("#video_chekboks").val(),
        'doc_chekboks': $("#doc_chekboks").val(),
        'id_cook': $("#id_cook").val(),
        'g-recaptcha-response': $("#g-recaptcha-response").val(),
        'captcha_post': $("#captcha_post").val(),
        'captcha_sid': $("#captcha_sid").val(),
    };		
    
    $.ajax({
      url:"/api_asked", 
      data:data, 
      type:'POST', 
      dataType: 'json',
      success:function(data){
        if( data.code == 1 ) {
          $('#okey').html(data.message);
        }
        if( data.code == 'error' ) {
          $('#okey').html(data.message);
        }
      }
    });

  });

Answer 1

Use FormData

Answer 2

To send images to the server, you can come up with 2 things - 1 decompose the image into a binary (base64 - I didn’t do this, but I know that it’s possible - google it). 2 - a more standard approach - the new formData()
object was specially invented for this . It will come to the server - an ordinary string
Working example:
https://github.com/WebKieth/Black-UI/blob/master/s...