Drag & Drop - Переносим Картинку на Форму с помощью мыши (HTML + JS)

10.10.22

Реализуем метод Drag & Drop на форме c записью/чтением двоичных данных в/из реквизит формы (пример: доработка формы Номенклатуры; Почтовый клиент; Присоединенные файлы) средствами HTML + JavaScript (работает в Толстом/Тонком/Web клиенте)

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование		По подписке [?]	Купить один файл
Drag & Drop - Переносим Картинку на Форму с помошью мыши (HTML + JS): .epf 8,72Kb 9	9	Скачать (1 SM)	Купить за 1 850 руб.

В продолжение темы "Картинка на форме с масштабированием при наведении курсора" предлагаю рассмотреть вариант взаимодействия с WebKit на платформе 1С используя "поле HTML документа" на примере метода Drag & Drop;

* Это не готовое решение, а пример взаимодействия с WebKit на платформе 1С средствами HTML + JavaScript;

В обработке реализовано:

Использование Drag & Drop (как для одного файла, так и пакетное добавление);
Запись Двоичных данных в реквизит формы из поля HTML документа;
Чтение двоичных данных из реквизита формы на поле HTML документа;

Возможное использование:

Доработка формы справочника "Номенклатура" для быстрого добавления/редактирования списка изображений;
Почтовый клиент;
Быстрое присоединение файлов на формах Справочников/Документов;

Подробнее:

Создадим Форму:

Делим на две колонки;
Слева ТаблицаФайлов;
Справа ПолеHTML;
Разделим ПолеHTML на две колонки;
Внузу правой колонки добавим div id='DropData' и немного стилизуем его (собственно он и будет отвечать за Drag & Drop);
Остальное пространство правой колонки оставим под миниатюры загруженных файлов;
В левой колонке будем отображать увеличенное изображение из Активной строки ТаблицыФайлов;

Где:

div id='DropData' - Наше поле в которое будем "перетаскивать" файлы;
ТаблицаФайлов - Таблица формы в которой будем хранить полученные файлы;
drop(event) - собственно сам скрипт отвечающий за "перетаскивание";
ПолеHTML - Реквизит формы с Типом "Строка" и Видом "Поле HTML документа";

Код

	ПолеHTML = "<html>
	|<head></head>
	|<body>
	|<script>
	|var arrayFiles = [] /* Массив изображений */
	|var maxSizeFile = 5242880 /* Максимальный размер изображения */
	|function drop(ev) {
	|  ev.preventDefault();
	|  if (ev.dataTransfer.files.length > 0)
	|     {var numFiles = ev.dataTransfer.files.length - 1
	|	   var files = ev.dataTransfer.files;
	|	   
	|	   for(var i = 0; i < files.length; i++){
	|	   var file = files[i];
	|	   if (file.size > maxSizeFile)
	|	      {elem = {
	|            'name'       : file.name,
	|            'data'       : ""#0"",
	|            'size'       : file.size,
	|            'type'       : file.type}
	|		  arrayFiles.push(elem);
	|		  if (i == numFiles)
	|	         {document.getElementById(""DropData"").innerHTML = JSON.stringify(arrayFiles);
	|			 arrayFiles = [];
	|	         document.getElementById(""DropData"").click();}}
	|	   else
	|	   filesData(file, i == numFiles)}}
	|}
	|function filesData(file, endFile) {
	|	var reader = new FileReader();
	|	reader.onload = function(f, endFile) {
	|	return function(e) {
	|      		elem = {
	|          'name'       : f.name,
	|          'data'       : e.target.result,
	|          'size'       : f.size,
	|          'type'       : f.type}
	|		arrayFiles.push(elem);
	|	if (endFile == true)
	|	{document.getElementById(""DropData"").innerHTML = JSON.stringify(arrayFiles);
	|   arrayFiles = [];
	|	document.getElementById(""DropData"").click();}
	|};
	|}(file, endFile);
	|	reader.readAsDataURL(file);
	|}												
	|</script>
	|  <style> /* Стилизуем */
	|	.img {
	|		height: auto;
	|		width: auto;
	|		max-width: 160px;  /* Максимальная ширина */
	|		max-height: 160px; /* Максимальная высота */
	|   }
	|	.bigimg {
	|		height: auto;
	|		width: auto;
	|		object-fit: contain;
	|		max-width: 480px;  /* Максимальная ширина */
	|		max-height: 480px; /* Максимальная высота */
	|   }
	|   .scale {
	|       display: inline-block; /* Строчно-блочный элемент */
	//|    	overflow: hidden; /* Скрываем всё за контуром */
	|   }
	|   .scale img {
	|       transition: 0.1s; /* Время эффекта */
	|       display: block; /* Убираем небольшой отступ снизу */
	|   }
	|   .scale img:hover {
	|       transform: scale(1.5); /* Увеличиваем масштаб */
	|   }
	|   TD#leftcol {
	|       width: 80%; /* Ширина левой колонки в пикселах */
	|		height: auto;
	|   }                                           
	|	.content { 
	|	    height:  90vh; 
	|	    overflow:auto; 
	//|	    width:250px; 
	|	    background:#fff; 
	|	    position:absolute; 
	|	    bottom:100px; 
	|	}
	|	.box {
	|		width: 19.7%; /* ширина блока*/
	|		height: 96px; /* высота блока*/
	|	    overflow:auto; 
	|		border: 1px dotted black; /* рамка блока*/
	|		background-color: #ccc; /* фон блока*/
	//|		padding: 2px; /* отступы внутри блока*/
	|	    position:absolute; 
	|	    bottom: 0; /* отступы снизу*/
	|	}
	|  </style>
	|<table width=""100%"" cellspacing=""0"" id=""maket"">
	|<tr>
	|<td id=""leftcol""><img class='bigimg' src='data:image/;base64," + Base64Строка(УвеличенноеИзображение) + "'/></td>
	|<td valign=""top"">
	|<div class=""content"">";	
	Для Каждого СтрокаТаблицы Из ТаблицаФайлов Цикл                                                            
		ПолеHTM = ПолеHTM + " 
	|<div class='scale'> <img class='img' src='data:image/;base64," + Base64Строка(СтрокаТаблицы.ДвоичныеДанныеФайла) + "'/><br></div>";
	КонецЦикла;
	ПолеHTM = ПолеHTM + " 
	|</div>
	|<div id='DropData' class='box' class='stylecomment' contenteditable='true' display: inline-block>
	|</div>
	|</td>
	|</tr>
	|</table>
	|</body>
	|</html>";

Далее в обработчике "ПолеHTMLПриНажатии" вызываем Скрипт:

ЭлементДанных = ДанныеСобытия.Document.getElementById("DropData");

И далее обрабатываем полученный ответ из ЭлементДанных;

Весь код открыт, на все вопросы готова ответить.

Не зависит от Конфигурации, работает на любой ОС.

Для платформы начиная с: 8.3.14.1565.

Конфигурация не имеет значения.

html javascript JS js drag and drop

+21 –

См. также

Service Desk Online – веб-портал для 1С ITIL, 1С ITILIUM и Управление IT-отделом 8

WEB-интеграция Администрирование веб-серверов Платные (руб)

Веб-портал обеспечивает удобный доступ к конфигурации 1С:ITIL(ИТИЛ), 1С:ITILIUM, Управление IT-отделом 8 через интернет с любого устройства посредством браузера, увеличивая эффективность работы пользователей и снижая нагрузку на сервер. Быстрая инсталляция портала за пару часов, удобный и интуитивно понятный интерфейс и безопасность данных помогут упростить работу с порталом и ускорить выполнение бизнес-процессов компании.

128000 руб.

19.12.2023 3227 5 0

Amocrm: интеграция с 1С

WEB-интеграция Анализ продаж Системный администратор Программист Пользователь Платформа 1С v8.3 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

Модуль "Подсистема интеграции AmoCRM с 1С" позволяет обеспечить единое информационное пространство, в котором пользователи могут эффективно управлять клиентской базой, следить за статусами сделок и поддерживать актуальность данных как в AmoCRM, так и в 1С.

60000 руб.

07.05.2019 35364 70 45

Веб-портал "Онлайн-заказ" для 1С

Оптовая торговля Розничная торговля WEB-интеграция 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 Платные (руб)

Онлайн-заказ - это решение для автоматизации процесса оформления заказов на сайте в торговых организациях. Продукт обеспечивает легкое взаимодействие между компанией и клиентами через веб-интерфейс, интегрированный с 1С:Предприятие. Система позволяет снизить операционные расходы, повысить лояльность клиентов и оптимизировать работу отдела продаж.

57600 руб.

26.11.2024 2933 2 3

Интеграция 1С с OpenCart 2.x, 3x модуль обмена данными

WEB-интеграция Оптовая торговля Розничная торговля Программист Управляемые формы 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Модуль интеграции 1С с OpenCart 2.x, 3x позволяет обмениваться данными между OpenCart (самая популярная бесплатная cms для интернет-магазинов) и 1С:Предприятие 8.

6800 руб.

17.11.2015 122909 408 141

233

Конструктор API для обмена базы 1С 8.3 с другими системами по протоколу http в формате JSON

WEB-интеграция Программист Руководитель проекта Платформа 1С v8.3 1C:Бухгалтерия 1С:Франчайзи, автоматизация бизнеса Платные (руб)

Расширение значительно упрощает написание API на 1С. Веб программисты получают простой и понятный доступ к 1С. Описание API создаётся автоматически и представляется в виде удобном как для человека, так и для программной обработки.

24000 руб.

27.09.2024 4974 5 2

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Системный администратор Программист Пользователь Платформа 1С v8.3 1C:Бухгалтерия 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020 19383 24 22

Экспортер — автоматизация выгрузки данных из 1С в Spot2D

WEB-интеграция Программист Бизнес-аналитик Платформа 1С v8.3 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 Оптовая торговля, дистрибуция, логистика ИТ-компания Платные (руб)

Модуль "Экспортер" — это расширение для 1С, предназначенное для автоматизации процессов выгрузки данных. Оно позволяет эффективно извлекать, преобразовывать и передавать данные из систем 1С в интеграционную платформу Spot2D. Подсистема упрощает настройку, снижает количество ручных операций и обеспечивает удобный контроль данных.

14400 руб.

20.12.2024 1178 7 2

Интеграция 1С с API СДЭК, Деловые Линии, ПЭК, Boxberry, Почта России и др. Управление доставками в 1С 8.3

WEB-интеграция Рабочее место Оптовая торговля Розничная торговля Логистика, склад и ТМЦ Пользователь Платформа 1С v8.3 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Оптовая торговля, дистрибуция, логистика Россия Управленческий учет Платные (руб)

Программный продукт "Управление доставками в 1С" позволяет обмениваться с личным кабинетом СДЭК, Деловые Линии, ПЭК, DPD, Почта России и другими транспортных компаниями. Упрощает создание заявок и резервирование заказов прямо в интерфейсе 1С

18000 руб.

10.03.2016 65140 309 98

Комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

1. user1203706 15 11.10.22 09:53 Сейчас в теме

(1) побольше пишите на тему вэбкита: как сделать слайдер, как ловить события с поля, как вывести красивый грид, как использовать в мобильном приложении - там это более актуально в виду ущербности типовых контролов.

2. Asya.Ozerova 40 11.10.22 10:04 Сейчас в теме

(1)Спасибо за Ваш отзыв, для меня это важно!
Я учту Ваше мнение!
(1)

как сделать слайдер, как ловить события с поля, как вывести красивый грид, как использовать в мобильном приложении

Возьму как Темы для следующих публикаций!

3. maXon777 129 29.10.22 08:34 Сейчас в теме

Полезная штука - попробуем у себя в трекере реализовать. В "чистом" 1с очень не хватает интерфейсных инструментов.

4. Asya.Ozerova 40 29.10.22 15:31 Сейчас в теме

(3)Если есть проблемы, пишите, думаю вместе мы сможем их решить!

5. salexdv 2367 30.10.22 12:12 Сейчас в теме

А зачем такие сложности, когда штатными средствами можно реализовать перетаскивание в обычное поле картинки на форме?

6. Asya.Ozerova 40 30.10.22 21:25 Сейчас в теме

(5)Пакетное тоже?

7. salexdv 2367 31.10.22 06:05 Сейчас в теме

(6) И пакетное тоже. Если перетаскивается несколько файлов, то в событии перетаскивания у поля картинки (таблицы значений и пр.) будет массив объектов с типом Файл, а дальше делаете с ними что хотите.