Привет, как дела.

Этот пост можно рассматривать как письменную версию моей мини-серии YouTube о сквозной загрузке изображений.

Весь показанный здесь код доступен в этом репозитории Github.

Намерение:

Цель этого сообщения и соответствующего плейлиста YouTube о функции загрузки изображений такова:

Почему это полезно:

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

Каковы некоторые варианты использования:

  • Обновление изображения профиля.
  • Изображение можно перетащить в заполнитель, и он показывает предварительный просмотр.
  • Некоторые пользовательские проверки, запрещающие пользователям загружать изображения большего размера.
  • Запретить пользователям загружать файлы нежелательных типов.
  • Отображается сообщение об ошибке и сообщение об успехе.
  • Использование Ajax для выполнения всей тяжелой работы и предотвращения перезагрузки страницы при загрузке изображения.
  • Имейте простую внутреннюю часть с использованием express-js для моделирования реального сценария загрузки.
  • Очистите выбранный файл перед загрузкой, повторная загрузка не требуется.

Используемые технологии:

В передней части:

  • HTML5 для разметки
  • JavaScript (ES5) для функций, связанных с изображениями
  • jQuery только для функциональности ajax, вы также можете использовать старый добрый XHR или недавнюю выборку ES6. Хорошая вещь в простом подходе заключается в том, что его очень легко интегрировать в любой фреймворк.
  • Bootstrap 4 для нашего стиля пользовательского интерфейса. Не обязательно, вы также можете использовать свои собственные стили.

В конце:

  • ExpressJS для обработки маршрутов.
  • NodeJS для сохранения файла и размещения сервера.
  • Bower для зависимостей внешнего интерфейса, таких как bootstrap и jQuery.
  • Nodemon для постоянного наблюдения за изменениями файлов и автоматического перезапуска сервера узлов.

Как установить:

На вашем компьютере должны быть установлены NodeJS и Git. Вы можете обойтись и без Git, но я настоятельно рекомендую вам использовать его, чтобы вы могли узнать об этом.

Сделайте клон git:

git clone https://github.com/ChaituKNag/image-upload-demo.git

Установить:

Перейдите в ту папку, в которой вы сделали git clone.

npm install

Установите клиентские зависимости:

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

bower install

Запустите приложение:

npm start

Это все, что нужно для начала работы.

Пользовательский интерфейс выглядит так:

Откройте http: // localhost: 3000.

Интерфейсный интерфейс:

Давайте поговорим о пользовательском интерфейсе.

Разметка:

Файл index.html имеет стандартную структуру HTML5. Файлы, связанные с Bootstrap 4, такие как bootstrap.min.css, bootstrap.bundle.min.js (который поставляется вместе с PopperJS) и jquery.min.js. Они необходимы для того, чтобы наш модный пользовательский интерфейс мог использовать магию Bootstrap 4. Поскольку мы используем jQuery для наших функций Ajax, хорошо, что мы включили это здесь.

Есть форма со скрытым типом ввода файла. Его ярлык окружает его так:

Причина, по которой вводятся внутри метки и скрываются, такова:

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

Метка имеет атрибут for, указывающий на ввод, который позволяет нам действовать в поле ввода, щелкая по метке (что имеет место для всех типов полей ввода). Итак, когда мы нажимаем на круговую секцию, мы фактически нажимаем на метку, и это, в свою очередь, вызывает действие в скрытом поле ввода.

Обратите внимание, что есть этот атрибут accept=”image/png, image/jpeg”, который гарантирует, что пользователь может загружать только изображения типа JPEG или PNG. Кроме того, нет атрибута multiple, поэтому пользователь может загрузить только один файл изображения.

Есть пустые абзацы для отображения сообщений об ошибках и успехах. Есть кнопка «Загрузить» и ссылка очистить для очистки выбранного изображения.

Индивидуальный стиль:

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

Даже супергерою нужна стрижка.

Я использую гибкость для центрирования формы. Контейнер изображения (этикетка) выполняет основную часть стиля.

Сообщения об ошибках и успешном выполнении:

Чтобы показать предварительный просмотр изображения, мы используем тег изображения внутри круглой метки. Но нам нужно убедиться, что изображение центрируется в этом круге, а переполнение должно быть скрыто (обратите внимание на стиль, связанный с меткой).

Обратите внимание, мы используем традиционный способ центрирования объектов с помощью left и преобразования там элементов translateX.

Мы также даем специальный класс .dragging, который добавляется к круговой секции, когда изображение перетаскивается на нее. Просто дополнительная ширина границы и низкая непрозрачность содержащегося текста.

Это все о пользовательском интерфейсе. Единственное место, где мы используем Bootstrap, - это когда мы стилизуем кнопку и используем контейнер (с фиксированной шириной). И, конечно же, шрифты, поставляемые с Bootstrap, как всегда выглядят потрясающе.

Интерфейсный JavaScript:

Оооо да, JS ...

Помните, что нет гигантских библиотек, которые помогли бы нам справиться с тяжелой работой. Это просто простой JavaScript.

Мы просто начинаем с создания переменных для всех разделов:

Параллельные мысли:

Здесь много чего происходит.

Мы должны убедиться, что мы:

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

Процесс перетаскивания:

Очевидно, это самая важная и интуитивно понятная часть этого приложения. Но не менее сложно убедиться, что вы не допускаете ошибок при обработке сценария перетаскивания.

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

Для этого вам нужно добавить специальный слушатель, который отменяет такую ​​статическую загрузку, как только это событие происходит. И это должно прослушивать все события, связанные с перетаскиванием.

Затем появляется эффект наведения, который возникает, когда пользователь перетаскивает файл в круговую секцию, мы должны добавить класс .dragging. Делаем это так:

События dragenter и dragover происходят, когда файл перетаскивается в круговую секцию. События dragleave и dragend происходят, когда файл удаляется из раздела. Событие drop, очевидно, происходит, когда файл переходит в раздел.

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

Есть еще один слушатель события drop (помните? Мы можем назначить несколько слушателей событиям DOM). Функция checkFileProperties заботится о проверке размера и типа файла. Если есть проблема, он изящно пожалуется, используя абзац #errorMessage, и завершит обработчик события перетаскивания. Кроме того, мы ограничиваем количество перетаскиваемых файлов только одним.

Мы ограничиваем размер файла не более 500 КБ и форматом JPEG или PNG. У файла есть свойства типа и размера, которые дают нам эту информацию.

Выбор файла вручную:

Но что, если пользователь вручную щелкает круговую секцию и вручную выбирает изображение вместо перетаскивания. Для этого мы получим событие изменения, запускаемое в скрытом поле ввода. Нам также нужно справиться с этим следующим образом:

Свойство event.target.files дает список файлов, выбранных пользователем.

Предварительный просмотр изображения внутри круглого сечения:

Функция handleUploadedFile заботится о предварительном просмотре загруженного изображения. Это делается с помощью конструктора FileReader, который поступает из API DOM JavaScript.

Этот FileReader читает файл и запускает событие load, когда чтение завершено. Мы устанавливаем источник изображения event.target.result.

Это позаботится о предварительном просмотре изображения.

Отправка изображения в админку:

Когда пользователь нажимает кнопку, загруженное изображение отправляется на резервную копию в строковом формате base64.

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

Вызов Ajax также отправляет имя файла, который мы получаем из метода handleUploadedFile. Строка base64 отправляется в свойстве с именем «theFile».

После успешной загрузки мы показываем сообщение об успешном завершении.

Очистка:

Если по какой-либо причине выбранное изображение необходимо очистить, пользователь может щелкнуть ссылку Очистить под кнопкой.

Функция выглядит так:

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

Внутренний JavaScript

Историю бэкэнда можно легко пометить как «До NodeJS» и «После NodeJS». Конечно, есть еще много конкурентов со стороны Python, Java и PHP, но за свой относительно короткий срок существования NodeJS так или иначе затронул жизнь каждого среднего разработчика. (Здесь стараюсь не поддаваться эмоциям: P).

Мы также используем NodeJS для этого примера. Мы используем его для упаковки и поддержки серверов. Упаковка позволяет нам использовать множество красивых приложений, построенных на NodeJS, таких как bower, expressJs и тому подобное.

Что мы используем:

  1. NodeJS точно.
  2. ExpressJS для маршрутизации и body-parser для анализа входящих запросов Ajax
  3. Bower для внешнего управления зависимостями
  4. Nodemon - для просмотра наших файлов и автоматического перезапуска Node.

Что такое роутинг:

Когда мы говорим о серверной части, всегда есть хороший шанс, что мы пытаемся создать микросервис или какой-то RESTful API, который будет использовать интерфейсная часть, верно!

ExpressJS и его функции маршрутизации позволяют нам создавать цельный API с его функциями промежуточного программного обеспечения. Мы можем ориентироваться на различные типы запросов и пути RESTful. Также мы можем указать параметры маршрута (хотя мы не рассматриваем их здесь).

Строим бэкэнд:

Здесь есть только один-единственный файл, который удовлетворяет все наши потребности, поскольку это очень простая демонстрация с точки зрения серверной части.

В этом файле мы

  • Создайте наш API-маршрут для обработки сценария загрузки.
  • Поднимите сервер для размещения как внешнего, так и внутреннего интерфейса.
  • Сохраните загруженный файл в папке «images».

API-маршрут для апладинга:

Импортируем экспресс-модуль и строим наш app. Затем мы запускаем сервер с помощью функции app.listen.

Затем мы создаем необходимую маршрутизацию, используя метод app.post API ExpressJS.

Здесь много всего происходит, давайте сделаем шаг назад и проанализируем.

  • URL-адрес API указывается в качестве первого параметра метода .post. Это /upload.
  • Второй аргумент - это функция, которая вызывается, когда этот конкретный маршрут нацелен через вызов post.
  • Когда функция запускается, первыми двумя аргументами являются объект запроса (req) и объект ответа (res) соответственно.
  • Объект запроса, как обычно, содержит объект тела, который содержит все данные, отправляемые из внешнего интерфейса.
  • В этом объекте body мы можем найти свойство theFile, которое содержит нашу строку данных изображения в кодировке base64.
  • Мы проверяем существование этого свойства и получаем как закодированную строку, так и заголовок изображения, чтобы сохранить его в файле, в котором мы собираемся сохранить его.
  • Затем мы записываем файл в папку «images», используя встроенный fs.writeFileSync метод NodeJS.
  • Обратите внимание, что в этом методе мы передаем кодировку также в объекте параметров. Это необходимо для того, чтобы файл был записан в правильном формате.
  • Наконец, мы используем объект ответа, чтобы отправить простую строку «UPLOADED» во внешний интерфейс, чтобы уведомить, что загрузка прошла нормально.

Статическая нагрузка:

Чтобы обслуживать файлы интерфейса, мы помещаем их в папку с именем public. Чтобы сервер приложений NodeJS обслуживал эти файлы как есть, мы используем метод express.static, как показано ниже.

Мы также обслуживаем компоненты bower_components на маршруте /libs.

Ограничение размера файла и кодирование входящих запросов:

Мы используем body-parser, чтобы внести некоторые изменения в промежуточное ПО.

  • Мы можем вызвать импортированную функцию bodyParser с объектом параметров, и основной параметр здесь - limit, который мы устанавливаем на 1mb.
  • Также мы конвертируем все данные входящего запроса в формат JSON с помощью метода bodyParser.json.
  • Мы также используем метод bodyParser.urlencoded для чтения кодированных данных, которые иногда проходят.

Вывод

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

Также хлопайте в ладоши :)

Я создал серию YouTube, демонстрирующую этот иллюстрированный пример демонстрации.

Пожалуйста, подпишитесь на мой канал YouTube (Naga Konada Devtips) и тоже подписывайтесь на меня.

До скорой встречи с другими уроками и советами.