Современная веб-разработка в значительной степени зависит от взаимодействия пользователя с веб-страницей. Возможность загрузки файлов является общим требованием для многих веб-приложений. Однако работа с загрузкой файлов не всегда проста. Иногда вам действительно нужна не кнопка ввода, а функция ввода, например, в случае, когда вы хотите, чтобы изображение или холст действовали как кнопка ввода.
В этой статье я покажу вам, как это реализовать.
Данный код представляет собой функцию JavaScript с именем inputButton()
. Эта функция динамически создает элемент ввода файла и возвращает обещание, которое разрешается в массив файлов, выбранных пользователем.
Давайте внимательнее посмотрим на код:
function inputButton(){ return new Promise((resolve, reject) => { const input = document.createElement('input'); input.type='file' input.click() input.onchange = e =>{ const selectedFiles = e.target.files; if (selectedFiles.length > 0) { resolve(selectedFiles); } else { reject('No files selected'); } } // Handle errors or user cancellation of the file selection dialog input.onerror = () => { reject('An error occurred while selecting a file'); }; input.onabort = () => { reject('User cancelled file selection'); }; }); }
Функция inputButton()
возвращает обещание, которое представляет собой способ обработки асинхронных операций в JavaScript. Когда обещание разрешено, оно возвращает массив файлов, выбранных пользователем. Параметр resolve
, передаваемый конструктору промиса, является функцией обратного вызова, которая вызывается при разрешении промиса.
Внутри конструктора Promise новый элемент ввода создается с помощью метода document.createElement()
. Затем для элемента ввода устанавливается тип file
, что позволяет пользователю выбирать файлы со своего устройства.
После создания элемента ввода для него вызывается метод click()
для программного запуска диалогового окна выбора файлов. Как только пользователь выбирает файлы и нажимает кнопку «Открыть», для элемента ввода запускается событие onchange
. Прослушиватель событий onchange
настроен на разрешение Promise с массивом файлов, выбранных пользователем.
Чтобы использовать эту функцию, просто вызовите ее и подождите, пока обещание разрешится. Вот пример того, как его использовать:
<div onClick={()=>inputButton().then(files => { console.log(files); // Do something with the selected files })}>Click div to select files</div>
В этом примере мы прикрепляем функциональность inputButton к div, который затем ведет себя как обычный ввод, аналогичным образом вы можете прикрепить его к любому элементу HTML, чтобы он вел себя как ввод. Метод then()
используется для обработки разрешенного промиса. Параметр files
, передаваемый функции обратного вызова, содержит массив выбранных файлов. Затем вы можете выполнять любые необходимые операции с этими файлами, например загружать их на сервер или отображать на веб-странице.
Заключение
Функция inputButton()
— это простая, но мощная утилита для создания диалогового окна ввода файла в JavaScript. Он позволяет легко включать выбор файлов в ваши веб-приложения, что делает его полезным инструментом для разработчиков.