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

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

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

Рассмотрим на примере компонента "Форма добавления-редактирования элементов инфоблока", как сделать ее более удобной для пользователя. Способ самодостаточный и будет работать с любой формой у которой есть 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-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Fancybox в стандартном шаблоне детальной карточки товара, вместо вспл... Просмотров: 127 Задача: заменить работу с изображениями в стандартном или кастомном шаблоне детальной карт... Запретить указание количества товаров, добавляемого в корзину, в опре... Просмотров: 92 Задача состоит в том, чтобы запретить указание количества товара, добавляемого в корзину, ... Подключение jquery из ядра битрикс и объединение своих скриптов в оди... Просмотров: 20932 Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие г... Обновление цен и остатков, в каталоге 1C-Битрикс, из текстового файла... Просмотров: 75 Задача: прочитать txt-файл с ценами и остатками, который выгружает программа учета по FTP,... Запретить изменения описаний товаров при выгрузке из 1С УТ на сайт Просмотров: 18172 При разработке сайтов на Битрикс, с интеграцией с 1С Управление Тороговлей, нужно запретит... Вывести имя пользователя добавившего элемент инфоблока в Битрикс Просмотров: 17249 Иногда, необходимо вывести имя пользователя добавившего элемент инфоблока. Например, автор... Автогенерация символьных кодов разделов и элементов Битрикс Просмотров: 16169 Иногда нужно создать символьные коды для разделов и элементов. Например: если сайт создан ... Скопировать номер телефона из поля пользователя в телефон для регистр... Просмотров: 2839 Задача, на конкретном сайте: раньше все пользователи регистрировались по стандартному режи... Создать pdf файл из элемента инфоблока, дать скачать пользователю, по... Просмотров: 5362 Задача: при каждом посещении статьи, на сайте, нужно создавать pdf файл с ее содержимым и ... Добавить все свойства инфоблока в умный фильтр одним разом Просмотров: 11283 Если у вас достаточно много свойств, в инфоблоке с товарами, например: больше 1000-чи, пос... Валидация пароля и подтверждения при регистрации в битрикс Просмотров: 15311 Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистраци... Объединить отдельные поля ФИО в одно свойство при оформлении заказа. Просмотров: 1335 Пользователь, при оформлении заказа, заполняет три отдельных поля с фамилией, именем и отч... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 1723 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Заполнить свойство инфоблока ценой из торгового каталога Просмотров: 5108 Если вам по какой-то причине нужно скопировать цену товара в свойство этого же инфоблока. ... Простые калькуляторы в карточке товара каталога на Битрикс Просмотров: 16199 На одном из создаваемых сайтов было необходимо сделать небольшой калькулятор и предварител... Отключить поиск по описаниям товаров в Битрикс Просмотров: 11891 Иногда, нужно отключить поиск по описаниям анонсов и детальному описанию товаров, при разр... Увидеть файл заказов который передаст Битрикс в 1С Просмотров: 24512 Для диагностики обмена заказов, интернет-магазина на 1С Битрикс с 1С Управление Торговлей,... Автоматически отгрузить заказ и сменить статус отгрузки, при выполнен... Просмотров: 975 Проблема: Заказы, на сайте, обрабатываются только в 1С. При этом 1С не работает с отгрузка... Малая корзина Битрикс, упрощенный шаблон Просмотров: 13624 Шаблон малой корзины битрикс, который можно вывести в боковом разделе шаблона или в шапке ... Показ страницы сайта в боковом слайдере, на примере всплывающей формы... Просмотров: 3250 Если вы хотите сделать подгрузку любой страницы сайта в боковой слайдер, для этого в битри...