The <input type="file"> визначає поле вибору файлу та кнопку «Огляд» для завантаження файлів. Щоб визначити поле вибору файлу, яке дозволяє вибрати кілька файлів, додайте атрибут multiple. Порада. Завжди додавайте тег <label> для найкращих практик доступності!
У цій статті ми розглянемо, як додати вхідний файл, а потім обробити введений файл за допомогою JavaScript.
- Доступ до вибраного(их) файлу(ів) Ми можемо отримати доступ до файлів із файлу, введеного нижче, враховуючи такий HTML: <input type="file" id="input"> …
- Обробка кількох файлів. …
- Виберіть файли за допомогою перетягування.
Елемент введення файлу Основою завантаження файлів у HTML є <input type="file"> елемент. Цей простий, але потужний елемент створює кнопку на вашій веб-сторінці, що дозволяє користувачам безпечно вибирати файли зі сховища свого пристрою.
<input type="file"> Елементи <input> із type="file" дозволяють користувачеві вибрати один або кілька файлів зі свого пристрою. Після вибору файли можна завантажувати на сервер за допомогою надсилання форми або маніпулювати ними за допомогою коду JavaScript і File API.
Коротше кажучи, для забезпечення безпечного завантаження файлів слід дотримуватися таких принципів:
- Список дозволених розширень. …
- Перевірте тип файлу, не довіряйте заголовку Content-Type, оскільки його можна підробити.
- Змініть ім’я файлу на щось, згенероване програмою.
- Встановіть обмеження на довжину імені файлу. …
- Встановіть обмеження розміру файлу.