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

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

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

Все заметки
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти
Напомнить пароль

Быстрая регистрация через соц.сеть:
Случайные заметки из блога
Изменить размер картинок на лету в битрикс

Встала задачка: на собственном сайте, уменьшить размер превьюшек...

Фиксированная корзина с обновлением, без перезагрузки страницы.

Иногда нужно сделать так, чтобы корзина в интернет магазине,...

Простой WEB сервер на ubuntu, для Битрикс

Расскажу как по быстрому сконфигурировать WEB сервер для работы...

Вывести минимальную цену торговых предложений в Битрикс

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

Отсортировать элементы в Битрикс по свойству привязка к разделам

При создании достаточно сложных интернет-магазинов на Битрикс,...

Малая корзина Битрикс, упрощенный шаблон

Шаблон малой корзины битрикс, который можно вывести в боковом...

Свежие комментарии в блоге
Вывести новости из конкретного раздела инфоблока Битрикс

[CODE] Выводить новости определенного раздела, но компонентом bitrix:news так. В компоненте bitri...

23.06.2017 / Кирилл
Пункты меню из разделов инфоблока Битрикс

Михаил спасибо за ваши уроки, все понятно и доступно. Подскажите пожалуйста (а лучше приведите приме...

20.06.2017 / Константин Логинов
Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс

[url=/blog-note/2040/]Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс[/url] До...

19.06.2017 / Михаил Базаров
Две готовые виртуальные машины для веб-разработки

Добрый день! Не работают ссылки на архивы облака mail.ru. Вы можете перезалить архивы?

12.06.2017 / Илья Белявцев

© 2011—2017 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.

Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

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

x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения:

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