| Дата последнего входа: | сегодня в 16:57 |
| Город: | Москва |
Не так давно в свет вышел довольно интересный и красивый загрузчик файлов, который сейчас во всю используется в блогах и живой ленте.
А вот описания к нему я не нашел. Восполним пробел.
Компонент называется main.file.input и лежит в системных компонентах. Все что он умеет — это загружать и сохранять файлы через CFile::SaveFile(), удалять через CFile::Delete() и все. Файлы по дефолту привязываются к главному модулю main и сохраняются в одноименной папке относительно /upload. Сам компонент возвращает некий универсальный идентификатор. Без него невозможна работа callback-ов при загрузки файла и после.
Сценарий работы компонента
Все основные js-функции лежат в script.js. При загрузке страницы формируется js-объект с заданными параметрами (это происходит в шаблоне). Далее, либо при загрузке страницы, либо по событию (клик, аякс-загрузка контента, ховер и пр.) срабатывают кастомные js-события, они вызывают функции, которые открывают нужные дивы и таблицы, ибо, по дефолту они скрыты. При этом срабатывает функция window.BlogBFileDialogUploader.prototype.GetUploadFileName, которая формирует форму для отправки файла и фрейм.
При отправке формы срабатывает window.BlogBFileDialogUploader.prototype.CallSubmit, которая отправляет файл. По дефолту файл отправляется на ту страницу, на которой находится сам компонент. Путь берется из параметра this.uploadFileUrl, а он из параметров при создании объекта. При случае можно менять на какой угодно. В общем и целом, лучше чтоб файл загружался на страницу, где находится компонент, потому как в самом компоненте идет проверка основных параметров и там формируется объект для работы с callback-ами. Без него у вас файл может загрузиться и сохраниться нормально, но индикатор загрузки зависнет, как будто файл не загрузился и процесс завис. Но обо всем по порядку.
Пользование компонента.
Вызываем компонент:
Параметры:
INPUT_NAME // уникальный name инпута, без него выдает ошибку
MULTIPLE => Y || N — позволяет или не позволяет множественную загрузку
MODULE_ID => main || iblock || blog || forum и пр. имя модуля, к которому файл привязан будет и в какую папку попадет относительно upload.
MAX_FILE_SIZE // максимальный размер файла (вроде в байтах)
ALLOW_UPLOAD A || F || I — какой тип файлов будем грузить: F — файлы, I — картинки, A — все подряд.
ALLOW_UPLOAD_EXT => «*.zip,*.rar,*.doc и пр.» // какие расширения файлов можно грузить. Работает если ALLOW_UPLOAD => F
Шаблон компонента всяко придется править, так что можно сразу копировать в шаблон .default. при этом в самом шаблоне поправьте пути к js и css файлам, которые грузятся по средствам js-функций.
После этого на странице вы не увидите ничего 
Для этого надо в шаблоне избавиться от некоторых мало понятных проверок и функции.
Убираем php-вставки в скрипте, в шаблоне, примерно строки 117, 154 и 171. Тут идет проверка php — callback — функции, в момент загрузки страницы, она пустая и компонент скрыт. Активируется после перетаскивания файла в дропзону. После этого компонент нормально отображается на странице при ее загрузке.
Сам загрузчик формируется объектом:
Если посмотреть функцию window.BlogBFileDialogUploader.prototype.CreateElements — там формируется фрейм и форма для отправки файла. Если нужно вместе с файлом передать еще какие-либо параметры, то добавляем свои инпуты.
window.BlogBFileDialogUploader.prototype.Callback — срабатывает после загрузки и содержит массив с инфой о файле. Сюда можно впихнуть все что получится в $arResult. С этим массивом можно работать и использовать дальше после загрузки.
При использовании компонента в режиме ajax — т.е. при загрузке компонента на страницу или в popup-окно с помощью аякса, не забудьте поменять параметр «upload_path» в объекте формирования загрузчика в шаблоне компонента. И если не хочется заморачиваться файлом-приемником, то поставьте туда этот же компонент.
ТВОРИТЬ — ВОТ НАСЛАЖДЕНИЕ!
линия
четверг, 16 ноября 2017 г.
Bitrix: ajax загрузка фото или облегчаем себе жизнь
Недавно случился казус. Поступила задача, прикрутить к форме отправки сообщений возможность прикрепить файлы. И чтобы был прогрессбар и смотрелось сие дело чинно и красиво. Да, задача решаема, особых сложностей не вызывает. В молодости, я имел вредную привычку, решать задачи в лоб. Но теперь то я не такой и зеленый. Практически на стадии зрелости. Первым делом отошел от компьютера и посмотрел в окно. На улице шел снег. Наконец то грязная последняя стадия осени сдалась и все стало бело. Всматриваясь в даль вдруг меня осенило — по любому в битриксе есть встроенный компонент для загрузки файлов. И я сильно удивился, когда такой имелся. Обрадовался я кончено дико. Визжал от радости как подросток.
Ближе к делу
Итак, что имеем:
Обычная форма. При клике на отправить обрабатывается JQUERY и предает данные в /inlude/ajax/form.php. Разумеется все работает AJAX-ом.
Теперь добавляем в шаблон формы компонент:
Ищем компонент в /bitrix/components/main.file.input/ копируем шаблон в шаблон сайта. переименуем шаблон в drag_n_drop — на случай если будем менять стили.
Открываем форму и видим такую красоту:
Кстати, можно сделать мульти загрузку, задать маску входных файлов.
Компонент загружает файл в /upload/main/ и после загрузки возвращает id файла.
Мало кто знает что в битриксе есть компонент, который может загружать файлы через drag n drop.
Сегодня статья будет короткая, т.к. рассказать особо нечего. Для того чтобы увидеть работу компнента можете разместить его на странице сайта.
После размещения кода в php файле сможем загрузить файлы через drag n drop. Цель данной статьи рассказать о наличии такого компонента. Всем удачи и успехов в работе!