Как создать загрузчик файлов JavaScript?

Загрузка файлов — основная функция большинства современных веб-проектов. Например, современные веб-сайты и веб-приложения, такие как Facebook, LinkedIn, Twitter, Coursera и многие другие, позволяют конечным пользователям загружать файлы, такие как изображения, документы, видео и т. д. Кроме того, онлайн-инструменты, такие как инструменты для редактирования изображений, средства проверки на плагиат, и конвертеры PDF-to-Word также позволяют пользователям загружать файлы. Иногда внутренним командам требуется функция загрузки файлов для загрузки видео и изображений продукта. Хотя создание загрузчика файлов может быть сложной задачей, сегодня доступно несколько сторонних инструментов и библиотек, которые помогают быстро внедрить функцию загрузки файлов в ваш проект. Однако, если вы хотите создать загрузчик файлов, а точнее загрузчик JavaScript, с нуля, эта статья — то, что вам нужно.

В этой статье мы покажем вам, как создать загрузчик файлов JavaScript с помощью ванильного JavaScript или чистого JavaScript без использования каких-либо внешних библиотек.

Каковы особенности загрузчика файлов?

Когда дело доходит до создания загрузчика файлов, нам нужно создать кнопку загрузки файлов во внешнем интерфейсе, которая позволит пользователям загружать нужные файлы на веб-сайт или в веб-приложение. Мы также можем разрешить загрузку нескольких файлов и отображать индикаторы выполнения для лучшего взаимодействия с пользователем. Кроме того, мы также должны показывать превью изображений, когда пользователь загружает файл изображения. После загрузки файла нам нужно прочитать его, отправить на сервер и сохранить на сервере. Иногда пользователи загружают большие файлы, что приводит к медленной загрузке. По этой причине лучше всего загружать большие файлы на сервер частями, чтобы предотвратить ошибки и повысить скорость. Эти фрагменты файлов более управляемы, чем один большой файл.

Кроме того, разработчики должны создать эффективный загрузчик файлов, поддерживающий быструю загрузку. Вам также необходимо обеспечить безопасность загрузчика файлов, чтобы кибер-злоумышленники не могли развернуть вредоносные программы и вирусы на вашем сервере.

Как создать загрузчик файлов JavaScript?

Шаг 1: Настройка серверной части

Мы будем использовать встроенный пакет HTTP для настройки сервера Node.js. Мы начнем с создания новой папки для проекта:

служба загрузки файлов mkdir

Далее мы создадим файл index.js. Это будет точка входа нашего сервера.

Наконец, мы создадим HTTP-сервер, который будет работать на порту 8080.

Шаг 2: Создание внешнего интерфейса загрузчика файлов JavaScript

Для создания внешнего интерфейса нашего загрузчика файлов JavaScript мы создадим базовый файл HTML, который будет отображать кнопку загрузки файла и принимать ввод файлов от пользователей. Мы также отобразим статус загрузки файла. Как только пользователь нажмет кнопку, начнется процесс загрузки файла.

Пока мы создаем простую кнопку загрузки файла, вы также можете отредактировать текст кнопки или изменить цвет кнопки в целях дизайна.

Далее мы отправим этот файл из бэкенда:

Шаг 3: Чтение загруженного файла во внешнем интерфейсе

Чтобы прочитать содержимое файла во внешнем интерфейсе, мы будем использовать объект «FileReader». Это позволяет веб-приложениям асинхронно читать содержимое файла (хранящегося в системе пользователя). Объект FileReader предлагает несколько методов чтения файла. Например, мы можем прочитать загруженный файл как буфер массива или как необработанные двоичные данные. Мы даже можем прочитать файл как URL-адрес данных. Здесь мы будем использовать метод массива для чтения файла:

Доступ к выбранным файлам можно получить в поле «файлы» для ввода:

Объект «FileReader» также предоставляет несколько прослушивателей событий, таких как «onprogress» и «onload», для отслеживания чтения загруженного файла на внешнем интерфейсе. Здесь мы будем использовать событие onload:

Шаг 4: Отправка загруженного файла на сервер

Перед отправкой файла, загруженного пользователем, на серверную часть, лучше всего разделить его на небольшие фрагменты или фрагменты и периодически отправлять фрагменты файла, особенно если размер файла большой. Это связано с тем, что загрузка очень больших файлов может вызвать проблемы, связанные с задержкой и скоростью. Кроме того, иногда злоумышленники также загружают файлы слишком большого размера, что может привести к сбоям в работе сервера.

Итак, мы сначала разделим файл на куски и отправим их на сервер один за другим. Нам также необходимо убедиться, что мы отправляем фрагменты по порядку, чтобы файл не был поврежден. Мы также будем использовать «асинхронное ожидание», чтобы не перегружать сервер запросами.

Шаг 5: Хранение фрагментов файлов на сервере

Наконец, мы получим фрагменты и сохраним их на сервере.

Вот и все. Теперь у нас есть полноценный загрузчик одного файла для загрузки файлов Javascript. Мы также можем включить загрузку нескольких файлов, используя опцию «несколько»:

<тип ввода = «файл» id = «файлы» несколько>

Мы будем разбивать каждый файл на куски один за другим и отправлять их в серверную часть.

Заключение

Загрузка файлов является важной функцией многих современных веб-приложений и веб-сайтов. Мы можем использовать сторонний инструмент загрузки файлов, например библиотеку JavaScript или API загрузки файлов, чтобы быстро реализовать загрузку файлов JavaScript в наши приложения. Однако вы также можете создать загрузчик файлов с нуля по своему усмотрению. Например, вы можете разбивать большие файлы на куски и отправлять их на сервер один за другим. В этой статье мы создали загрузчик файлов JavaScript с помощью Vanilla JS с нуля.