Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2019, 01:18
Новичок на форуме
Отправить личное сообщение для тоша Посмотреть профиль Найти все сообщения от тоша
 
Регистрация: 29.09.2019
Сообщений: 1

отправить несколько файлов формате base64 data:image - Кропирование
Есть форма-анкета, поля с загрузкой фото 5шт, после чего добавлена функция кропирование(обрезка фото Crop.js) пользователь выбирает область на фото и загружает,образное фото отображается рядом с полем, формате base64 data:image
и преобразовывается в blob, добавляется formData и отправляется POST

Проблема в том, что фото отправляется только одно а не 5шт, не могу понять как в formData добавить остальные 4шт и отправить общим запросом, это надо создать 5 blob-ов? и из function() вытаскивать их в один POST запрос?

основная задача отправить base64 data:image POST запросом, другого решения не нашел только через blob
(avatar.src = "base64 data:image........")
avatar.src = canvas.toDataURL();

canvas.toBlob(function (blob) { 
var formData = new FormData(form);
formData.append('avatar', blob, 'avatar.jpg');
fetch("/my.php", {method: 'POST', body: formData});
});

Последний раз редактировалось тоша, 06.10.2019 в 01:21.
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2019, 07:48
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,865

var formData = new FormData(form) - до работы с изображениями.
formData.append('key_name', blob, 'name.ext') - при работе с изображениями.
fetch(...) - после работы с изображениями.
Ответить с цитированием
  #3 (permalink)  
Старый 07.10.2019, 13:16
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,171

Сообщение от тоша
другого решения не нашел только через blob
Теоретически можно и 'data:image...' отправить, это же обычная строка, formData.append('avatar', 'data:image...', 'avatar.jpg').
Сообщение от тоша
new FormData(form)
Так оригиналы изображений тоже отправятся, если поля имеют name и принадлежат этой form.
Сообщение от тоша
'avatar.jpg'
По-умолчанию там png, чтобы был jpg надо явно указывать canvas.toBlob(function(blob){...}, 'image/jpeg').

Последний раз редактировалось Rise, 07.10.2019 в 13:20.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Простейший конвертер группы файлов видео в несколько форматов FINoM Оффтопик 4 29.01.2012 05:34
Соединить несколько файлов JS в один maguaguru Общие вопросы Javascript 17 01.12.2011 15:33