Чтобы вызвать меню загрузки файла при клике на абсолютно любой элемент 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’] и с ним далее работаем, не забывая соблюдать ТБ файловой загрузки на сервер.