Добрый день. Подскажите как отправить несколько фотографий с HTML формы в телеграм.
У меня есть инпут с файлом и пустой массив. Смотрю событие change у инпута и добавляю файл в массив.
Правильно ли я добавляю фотографии в FormData и как принять эти фотографии в PHP?
HTML:
<form class="modal__form" autocomplete="off" method="post" action="resources/send.php">
<input class="modal__form-input" type="text" placeholder="Ваше имя" name="name">
<input class="modal__form-input modal__form-input--age" type="number" placeholder="Возраст" name="age">
<input class="modal__form-input modal__form-input--telegram" type="text" placeholder="@Telegram" name="telegram">
<ul class="modal__form-photos"></ul>
<label class="modal__form-file">
<input class="modal__form-file-input" type="file" accept="image/*" name="photo">
<div class="modal__form-file-text">Прикрепить фото</div>
</label>
<div class="modal__form-buttons">
<button class="button button--blue modal__form-button" type="submit">Оставить заявку</button>
<a class="button button--ghost modal__form-button" href="" title="" target="_blank">Связаться с админом</a>
</div>
</form>
JS:
const photosArr = [];
document.querySelectorAll('.modal__form').forEach((modalForm) => {
const fileInput = modalForm.querySelector('.modal__form-file-input');
fileInput.addEventListener('change', (event) => {
const reader = new FileReader();
reader.onload = () => {
// ...
};
reader.readAsDataURL(event.target.files[0]);
photosArr.push(event.target.files[0]);
});
});
const modalForm = document.querySelector('.modal__form');
if (modalForm) {
modalForm.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(modalForm);
const sendMail = modalForm.getAttribute('action');
photosArr.forEach((item) => {
formData.append('photos[]', item);
});
const xhr = new XMLHttpRequest();
xhr.open('POST', sendMail, true);
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 400) {
if (xhr.status === 200) {
modal.open('#modal-success');
} else {
console.log(`Ошибка ${xhr.status}: ${xhr.statusText}`);
}
} else {
console.log(`Ошибка сервера. Номер: ${xhr.status}`);
}
};
xhr.onerror = () => {
console.log('Ошибка отправки запроса');
};
xhr.send(formData);
});
}
PHP:
<?php
// описание метода api telegram
// https://core.telegram.org/bots/api#sendmessage
$tg_user = '-1111111'; // id пользователя, которому отправиться сообщения
$bot_token = '111111'; // токен бота
$name = $_POST['name'];
$age = $_POST['age'];
$telegram = $_POST['telegram'];
$arr = array(
'Имя:' => $name,
'Возраст:' => $age,
'Телеграм:' => $telegram
);
$text = "<b>Заявка</b>\n";
//Настраиваем внешний вид сообщения в телеграме
foreach($arr as $key => $value) {
$text .= "<b>".$key."</b> ".$value."\n";
};
// параметры, которые отправятся в api телеграмм
$params = array(
'chat_id' => $tg_user, // id получателя сообщения
'media' => json_encode([ // Фотографии
[
'type' => 'photo',
'media' => ?,
'caption' => $text, // текст сообщения
'parse_mode' => 'HTML'
],
[
'type' => 'photo',
'media' => ?
],
]),
'parse_mode' => 'HTML' // режим отображения сообщения, не обязательный параметр
);
// параметры, которые отправятся в api телеграмм
$params = array(
'chat_id' => $tg_user, // id получателя сообщения
'text' => $text,
'parse_mode' => 'HTML' // режим отображения сообщения, не обязательный параметр
);
$curl = curl_init();
// curl_setopt($curl, CURLOPT_URL, 'https://api.telegram.org/bot' . $bot_token . '/sendMediaGroup'); // адрес api телеграмм
curl_setopt($curl, CURLOPT_URL, 'https://api.telegram.org/bot' . $bot_token . '/sendMediaGroup'); // адрес api телеграмм
curl_setopt($curl, CURLOPT_POST, true); // отправка данных методом POST
curl_setopt($curl, CURLOPT_TIMEOUT, 10); // максимальное время выполнения запроса
curl_setopt($curl, CURLOPT_POSTFIELDS, $params); // параметры запроса
$result = curl_exec($curl); // запрос к api
curl_close($curl);
echo json_encode(["result" => $result, "resultfile" => $rfile, "status" => $status]);
?>