В настоящее время почти каждому приложению администратора требуется компонент загрузки файлов для загрузки этих файлов пользователя на сервер. По умолчанию в каждом браузере ввод типов файлов довольно уродлив, но с помощью JavaScript и CSS вы можете создавать красивые компоненты. Если вы не можете создать его самостоятельно или просто хотите внедрить плагин, чтобы он был доступен в течение нескольких секунд, мы собрали для вас 7 наиболее используемых плагинов для загрузки файлов, доступных для JavaScript. Наслаждайся ими !
7. загрузчик
Uploader — очень легкий плагин для загрузки файлов с использованием ajax (асинхронный) и включает в себя поддержку очередей, отслеживания прогресса и перетаскивания. Он легко настраивается и легко адаптируется к любому дизайну Frontend, а также очень прост в работе с любой логикой бэкенда. Основное внимание будет уделено современным браузерам, а также предоставлению метода, позволяющего узнать, когда плагин не поддерживается. Идея состоит в том, чтобы сделать его простым и легким.
6. FineUploader
Fine Uploader — одна из самых крутых и простых библиотек загрузки файлов javascript, которую можно настроить за пару минут. Примеры кода приведены в официальных документах, независимо от того, используете ли вы оболочку jQuery или Vanilla JavaScript. Вам нужно только включить файл CSS, файл JavaScript и обрабатывать загрузки на стороне сервера в соответствии с используемой вами технологией. Нет абсолютно никаких других зависимостей. Он предлагает несколько плагинов для загрузки файлов с предварительным просмотром изображений, перетаскиванием, индикаторами выполнения. Поддержка S3 и Azure, масштабирование изображений, поддержка форм, разбиение на фрагменты, возобновление, пауза и множество других функций.
5. Загрузка файла jQuery
Загрузка файла jQuery — это плагин jQuery, который позволяет реализовать виджет с множественным выбором файлов, поддержкой перетаскивания, индикаторами выполнения, проверкой и предварительным просмотром изображений, аудио и видео. Поддерживает междоменную, частичную и возобновляемую загрузку файлов и изменение размера изображения на стороне клиента. Работает с любой серверной платформой (PHP, Python, Ruby on Rails, Java, Node.js, Go и т. Д.), Которая поддерживает стандартную загрузку файлов HTML-форм.
4. Filepond
Filepond — это библиотека JavaScript, которая может загружать все что угодно, оптимизировать изображения для более быстрой загрузки и предлагать отличный, доступный и гладкий пользовательский интерфейс. Базовая библиотека написана на обычном JavaScript и поэтому может использоваться везде. Filepond принимает каталоги, файлы, большие двоичные объекты, локальные URL-адреса, удаленные URL-адреса и данные URI. Zou может отправлять файлы на сервер с помощью XMLHttpRequest или сохранять и отправлять с отправкой формы как base64 с помощью плагина File Encode.
3. Ввод файла по Krajee
Библиотека ввода файлов от Krajee — это расширенный ввод HTML 5 для Bootstrap 3.x с предварительным просмотром файлов для различных файлов, множественным выбором и многим другим. Плагин позволяет вам простой способ настроить расширенный элемент управления выбора / загрузки файлов, созданный специально для работы со стилями Bootstrap CSS3. Он еще больше расширяет возможности ввода файлов, предлагая поддержку для предварительного просмотра широкого спектра файлов, таких как изображения, текст, HTML, видео, аудио, Flash и объекты. Кроме того, он включает в себя загрузки на основе AJAX, перетаскивая удаление файлов, просмотр хода загрузки и выборочный предварительный просмотр, добавление или удаление файлов. Плагин предлагает несколько тем, включая тему проводника:
2. Uppy
Uppy — это элегантный модульный загрузчик файлов, который легко интегрируется с любой средой JS. Он извлекает файлы с локального диска, Google Диска, Dropbox, Instagram, удаленных URL-адресов, камер и других интересных мест, а затем загружает их в конечный пункт назначения. Он быстрый, простой в использовании и позволяет вам беспокоиться о более важных проблемах, чем создание загрузчика файлов. Люди, стоящие за Transloadit и как таковая будет иметь первоклассную поддержку для добавления их загрузки и кодирования бэкэнда, но это опция, и вы можете так же легко свернуть свою собственную.
1. Зона сброса
Существует множество тем Dropzone.js с совершенно другим пользовательским интерфейсом. Это довольно полезная демонстрация мощных возможностей конфигурации Dropzone.js, так что вы можете заставить Dropzone.js выглядеть именно так, как вы хотите, и это очень легко сделать, например, с помощью темы Bootstrap:
Если вам известен еще один замечательный компонент для загрузки файлов с открытым исходным кодом, написанный на VanillaJS или jQuery, поделитесь им с сообществом в поле для комментариев.
