При разработке проекта Тикеты - система учета задач/Service Desk в 1С (интеграция с Trello, Мобильное приложение) необходимо было реализовать загрузку файлов через перетаскивание (Drag & Drop).
Java Script раньше видел только в кино, потому получилось так как получилось.
Что умеет обработка:
- Перетаскивание файла или группы файлов с получением имени файла, размера, двоичных данных.
- Фильтр по максимальному размеру файла (переменная var maxSizeFile = 5242880) в 5Мб.
Что не умеет обработка:
- Индикацию. Т.е. если файлов много и они качаются, пользователь не в курсе на каком этапе процесс. Окно не блокируется.
Тестировалось на платформе 8.3.16, как на управляемых, так и на обычных формах, в вэб-клиенте.
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
Комментарий = ПолеВводаКомметария();
КонецПроцедуры
&НаСервере
Функция ПолеВводаКомметария() Экспорт
ВводКомментария = "<html>
|<head></head>
|<body>
|<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|<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>
|</head>
|<div id=""comment"" class=""stylecomment"" contenteditable=""true"" display: inline-block></div>
|<div id=""DropData"" style=""display:none""></div>
|</body>
|</html>";
Возврат(ВводКомментария);
КонецФункции
&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
ТаблицаФайлов.Очистить();
ЭлементДанных = ДанныеСобытия.Document.getElementById("DropData");
Данные = ЭлементДанных.innerHTML;
Если НЕ ПустаяСтрока(Данные) Тогда
ЧтениеJSON = Новый ЧтениеJSON;
ЧтениеJSON.УстановитьСтроку(Данные);
МассивФайлов = ПрочитатьJSON(ЧтениеJSON);
ЭлементДанных.innerHTML = "";
Для Каждого СтруктураФайла Из МассивФайлов Цикл
Если СтруктураФайла.data = "#0" Тогда
Сообщение = Новый СообщениеПользователю;
Сообщение.Текст = "Размер файла """ + СтруктураФайла.name + "(" + Строка(Окр(СтруктураФайла.size / 1024 / 1024)) + " Мб)"", что более допустимого (5 Мб)";
Сообщение.Сообщить();
Иначе
Поз = Найти(СтруктураФайла.data, "base64");
Если Поз > 0 Тогда
ДанныеBase64 = Прав(СтруктураФайла.data, СтрДлина(СтруктураФайла.data) - Поз - 6);
СтрокаТаблицы = ТаблицаФайлов.Добавить();
СтрокаТаблицы.ИмяФайла = СтруктураФайла.name;
СтрокаТаблицы.ДвоичныеДанныеФайла = Base64Значение(ДанныеBase64);
КонецЕсли;
КонецЕсли;
КонецЦикла;
Если ТаблицаФайлов.Количество() > 0 Тогда
Для Каждого СтрокаТаблицы Из ТаблицаФайлов Цикл
Сообщение = Новый СообщениеПользователю;
Сообщение.Текст = "Успешно загружен файл """ + СтрокаТаблицы.ИмяФайла + """";
Сообщение.Сообщить();
КонецЦикла;
КонецЕсли;
КонецЕсли;
КонецПроцедуры
Вступайте в нашу телеграмм-группу Инфостарт
