Как сделать отправку файла на сервер одной кнопкой из HTML?
На моей веб-странице есть кнопка, по которой я хочу выбрать файл на диске и отправить его на веб-сервер. Я реализовал механизм так:
- добавил в код веб-страницы невидимую форму
<form action="index.php" method="post" enctype="multipart/form-data">
<input type="file" name="upFile" id="fileName" style="display:none">
<input type="submit" name="file" id="fileUpload" value="upload" style="display:none">
</form>- По нажатию моей кнопки вызываю javascript функцию, которая программно кликает сначала на input запроса файла fileName, а потом на input отправки файла fileUpload
function sendFile()
{
// Ищем элемент fileName - это диалог выбора файла
var fileElem = document.getElementById("fileName");
if (fileElem)
fileElem.click(); // Запускаем диалог выбора файла
// Ищем элемент fileUpload - это кнопка отправки формы
const fileUpload = document.getElementById("fileUpload");
if(fileUpload)
fileUpload.click(); // Отправляем форму с файлом
}Как оказалось, клик по кнопке выбора файла - неблокирующий, и в то время, когда показывается диалог выбора, уже отправляется форма с пустыми данными. Я пробовал следующие варианты:
- задержка на 3 секунды после вызова диалога выбора файла. Если успеть выбрать файл за 3 секунды, то все работает, но пользоваться неудобно.
- отслеживание закрытия окна диалога. Закрытие отслеживается, но функционал не работает - все равно отправляется пустая форма.
- мониторинг состояния формы через observer. Не работает - не вызывается коллбэк. Возможно, что-то не так сделал. Код прилагаю.
// Выбираем целевой элемент
var fileElem = document.getElementById("fileName");
// Конфигурация observer (за какими изменениями наблюдать)
const config = {attributes: true, childList: true, subtree: true};
// Создаём экземпляр наблюдателя с указанной функцией колбэка
observer = new MutationObserver(closeDialog);
// Начинаем наблюдение за настроенными изменениями целевого элемента
observer.observe(fileElem, config);Функция closeDialog не вызывалась никогда. Есть идеи, куда копнуть еще или что не так делаю?