Загрузка файлов через ajax на jQuery

Чтобы вызвать меню загрузки файла при клике на абсолютно любой элемент html документа, достаточно создать невидимый(почти невидимый) input и при событии его изменения создается объект FormData в который помещаем файлы отправляя по ajax при помощи jquery. Полностью display:none; для input ставить нельзя, это обходится так:

$(document).on('click', '[data-file]', function () {
    $('#file').remove();
    let input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('id', 'file');
    input.setAttribute('accept', '.png, .jpg, .jpeg, .gif');
    input.style.cssText = 'width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1;';
    document.body.appendChild(input);
    input.click();
});

$(document).on('change', '#file', function () {
    let formData = new FormData();
    formData.append('file', $("#file")[0].files[0]);
    $.ajax({
        type: "POST",
        url: '/api/upload',
        cache: false,
        contentType: false,
        processData: false,
        data: formData
    })
        .always(function () {
            $('#file').remove();
        });
});

При клике на элементы с атрибутом data-file будет вызвано системное меню загрузки файла. Это пример отправки файла по ajax без дополнительных прибамбасов. На бекенд прилетает массив $_FILES[‘file’] и с ним далее работаем, не забывая соблюдать ТБ файловой загрузки на сервер.