Телеграм: @camouf_ru Почта: mihail@bazarow.ru

INPUT type="file" Предпросмотр превью картинки до загрузки

Просмотров: 11187

Рассмотрим на примере компонента "Форма добавления-редактирования элементов инфоблока", как сделать ее более удобной для пользователя. Способ самодостаточный и будет работать с любой формой у которой есть input[type="file"]

Для начала коротенькое видео, что бы было нагляднее как это работает и чего мы добъемся

Генерация превью в input type="file"

Для реализации нам понадобится всего ничего: небольшой js скрипт и сам input[type="file"]. Даже не придется ломать компонент или переписывать под себя, весь обработчик генерации превьюшки будет прямо в шаблоне "iblock.element.add.form"

Копируем шаблон стандартной формы добавления элементов инфоблока ("iblock.element.add.form") в шаблон своего сайта. Открываем его на редактирование и находим один input type="file", просто поиском по документу, он там один (примерно 232-ая строчка)

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

$('#img').change(function () {
	var input = $(this)[0];
	if (input.files && input.files[0]) {
		if (input.files[0].type.match('image.*')) {
			var reader = new FileReader();
			reader.onload = function (e) {
				$('#img-preview').attr('src', e.target.result);
			}
			reader.readAsDataURL(input.files[0]);
		} else {
			console.log('ошибка, не изображение');
		}
	} else {
		console.log('хьюстон у нас проблема');
	}
});
$('#reset-img-preview').click(function() {
	$('#img').val('');
	$('#img-preview').attr('src', '<?=SITE_TEMPLATE_PATH;?>/images/no_img.jpg');
});
$('#form').bind('reset', function () {
	$('#img-preview').attr('src', '<?=SITE_TEMPLATE_PATH;?>/images/no_img.jpg');
});

Сам input оформляем вот такими кодом, подсказки прямо в коде.


	<div>
 // Собственно сам input
	<input type="file" id="img" multiple accept="image/*" name="PROPERTY_FILE_<?=$propertyID?>_<?=$arResult["ELEMENT_PROPERTIES"][$propertyID][$i]["VALUE_ID"] ? $arResult["ELEMENT_PROPERTIES"][$propertyID][$i]["VALUE_ID"] : $i?>"/>
	 </div>
	 <div>
// Проверяем еть ли картинка (например это не новый элемент а редактирование старого)
	 <?if (!empty($value) && is_array($arResult["ELEMENT_FILES"][$value])):?> 
	 <img id="img-preview" src="<?=$arResult["ELEMENT_FILES"][$value]["SRC"]?>"/>
	 <?else:?>
// Если картинки нет, выводим заглушку
	     <img id="img-preview" src="<?=SITE_TEMPLATE_PATH;?>/images/no_img.jpg" />
	    <?endif;?>
	    <br />
	 </div>

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

Петр Колотов 07.08.2019
Добрый день.
Необходимо реализовать в crm-формах вывод картинки возле названия товара. Подскажите, как настроить взаимодействие с торговым каталогом, чтобы можно было картинки брать прямо с каталога?

Записная книжка разработчика

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

Ускорение работы сайта на 1С-Битрикс Просмотров: 15838 Данная статья написана специально под видеоролик (приложен в конце статьи), опубликованный... Вывести компонент новостей на страницу в Битрикс Просмотров: 63533 Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, ч... Адаптивное гамбургер меню для битрикс Просмотров: 14424 Заметка коротенькая, но решил оставить ее - так как самому часто нужно нечто подобное. В а... Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружени... Просмотров: 25830 WebP это современный формат сжатия изображений, который позволяет, при правильных настройк... Вывести свойство привязка к Яндекс Картам в Битрикс Просмотров: 18143 Часто бывает нужно вывести свойство привязка к Яндекс карте в детальном описании элемента... Запретить изменения описаний товаров при выгрузке из 1С УТ на сайт Просмотров: 16836 При разработке сайтов на Битрикс, с интеграцией с 1С Управление Тороговлей, нужно запретит... Получить все товары из всех заказов пользователя. История купленных т... Просмотров: 1344 Задача: нужно создать раздел, в персональном разделе пользователя, с историей всех купленн... Подключение SSL на Битрикс виртуальная машина Просмотров: 11893 С первого января 2017 года, наличие безопасного соединения HTTPS становится практически об... Умный фильтр во всплывающей панели на мобильных. Просмотров: 1413 Шаблон умного фильтра в Битриксе достаточно сложный, с точки зрения верстки и не очень кра... Ссылка и название раздела в списке новостей Битрикс Просмотров: 10491 Если нужно вывести название раздела инфоблока в котором находится конкретный элемент/новос... Умный фильтр на главной странице Битрикс Просмотров: 20823 Редкая но востребованная задачка- это вывести компонент "умный фильтр" на главную страницу... Создание PWA для сайта на 1С-Битрикс Просмотров: 2051 Технология PWA позволяет создать приложение для любого сайта. Не обязательно работающего ... Вывести информацию, только на первом уровне раздела каталога, в 1С-Би... Просмотров: 4216 Задача: на сайте, в каталоге, выводится два фильтра - боковой и верхний. Оба компонента по... Ленивая подгрузка картинок в компоненте, на vue js Битрикс Просмотров: 9424 Если на одну страницу сайта выводится большое количество картинок, которые могут долго под... Бонус за выполненный заказ на внутренний счет пользователя Просмотров: 4233 Задача: после того как заказ, в интернет-магазине, перешел в статус "Выполнен" начислить п... Отфильтровать новости в Битрикс за заданный период Просмотров: 15551 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Если предложение SKU в корзине, поменять кнопку добавления на "В корз... Просмотров: 3112 Данная заметка является дополнением к ранее опубликованной: Есл... Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс Просмотров: 36654 Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одн... Создание скидки на общую сумму покупки в Битрикс корзине Просмотров: 26907 Функционал интернет-магазина, работающего под управлением 1С Битрикс, позволяет задавать м... Определить местоположение пользователя и показать на карте Просмотров: 3253 Задача определить местоположение текущего пользователя и показать его на карте, с меткой. ...