How to pass image data using Ajax request to server side in backend magento 2?

By default, Image data are not posted using Ajax call.

Only plain data will be passed as Ajax posts. if we need to pass image data using Ajax we need to call Ajax as below way,
Call jQuery using requirejs way in a backend template file.

Let’s create a simple example of the form,

<form id="abcd" action="" enctype="multipart/form-data">
	<div class="control">
	    <input type='file' class='multi' name='attachment' id='attachment'/>
	</div>
	<button type="button" name="submitajax" id="submitajax"></button> 
</form>
<script>
    require(["jquery"],function($) {
        $("#submitajax").on('click', function() {
            var file = document.getElementById('attachment').files[0];
            var form;
            if (typeof file != 'undefined') {
                form = new FormData(document.getElementById('attachment'));
                form.append('form_key',window.FORM_KEY);
                form.append('attachment', file);
                form.append('id', getId);
            }
            $.ajax({
                url: "<?= $block->getUrl('myajax/custom/urlname'); ?>",
                type: 'post',
                mimeTypes: 'multipart/form-data',
                data: form,
                cache: false,
                contentType: false,  //this is must required
                processData: false, //this is must required
                beforeSend: function() {
                    $('body').trigger('processStart');
                },
                success: function (response) {
                    console.log(response);
                    $('body').trigger('processStop');
                }
            });
        });
    });
</script>

We need to Use the You FormData() object of Javascript to store our image data and using the above way we can just send image data to the server-side using Ajax.