Как добавить в контактную форму на добавить больше фото Html, JS, PHPmailer
В общем есть контактная форма с отправлением на эл. почту на HTML,JS + phpMAILER библиотека. Всё работает, но добавляется только 1 фото, потратил дни что-бы сделать возможность исправить это, но никак не получается. Я только учусь, и по большей части делал отправку по туториалу,но теперь не могу изменить на то, что нужно мне. Нужно показ всех фото при загрузке в input, после отправка всех фото на эл почту.
Javascript
"use strict"
// Contact form
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('form');
form.addEventListener('submit', formSend);
async function formSend(e) {
e.preventDefault();
let error = formValidate(form);
let formData = new FormData(form);
formData.append('image',formImage.files[0]);
if (error === 0) {
form.classList.add('_sending');
let response = await fetch('sendmail.php', {
method: 'POST',
body: formData
});
if (response.ok) {
let result = await response.json();
alert(result.message);
formPreview.innerHTML = '';
form.reset();
form.classList.remove('_sending');
} else {
Alert("Klaida");
form.ClassList.remove('_sending');
}
} else {
alert('Užpildykite visus reikalingus laukus');
}
}
function formValidate(form) {
let error = 0;
let formReq = document.querySelectorAll('._req');
for (let index = 0; index < formReq.length; index++) {
const input = formReq[index];
formRemoveError(input);
if (input.value === '') {
formAddError(input);
error++;
}
}
return error;
}
function formAddError(input) {
input.parentElement.classList.add('_error');
input.classList.add('_error');
}
function formRemoveError(input) {
input.parentElement.classList.remove('_error');
input.classList.remove('_error');
}
// Add input file to var
const formImage = document.getElementById('formImage');
// Adding div for file preview
const formPreview = document.getElementById('formPreview');
formImage.addEventListener('change', () => {
uploadFile(formImage.files[0]);
});
function uploadFile(file) {
if(!['image/jpeg'].includes(file.type)) {
alert('Leidziamas tik jpeg formatas.');
formImage.value = '';
return;
}
if (file.size > 6 * 1024 * 1024) {
alert('Nuotrauka negali būti didesne nei 6 MB.');
return;
}
var reader = new FileReader();
reader.onload = function (e) {
formPreview.innerHTML = `<img src="${e.target.result}" alt="image">`;
};
reader.onerror = function (e) {
alert('Klaida');
}
reader.readAsDataURL(file);
}
});
<form class="form__body" autocomplete="on" id="form">
<div class="form__left">
<label for="form__manufacturer" data-i18n="car_manufacturer"></label>
<input id="form__manufacturer" name="name" type="text" class="feedback-input form__input _req" placeholder="">
</div>
<div class="form__right">
<label for="form__model" data-i18n="car_model"></label>
<input id="form__model" name="model" type="text" class="feedback-input form__input _req" placeholder="">
</div>
<div class="form__left">
<label for="form__engine" data-i18n="car_engine"></label>
<input id="form__engine" name="engine" type="text" class="feedback-input form__input _req" placeholder="">
</div>
<div class="form__right">
<label for="form__transmission">Pavarų dėžė</label>
<input id="form__transmission" name="transmission" type="text" class="feedback-input form__input _email _req" placeholder="">
</div>
<div class="form__left">
<label for="form__price" data-i18n="car_price"></label>
<input id="form__price" name="price" type="text" class="feedback-input form__input _req" placeholder="">
</div>
<div class="form__right">
<label for="form__years" data-i18n="car_years"></label>
<input id="form__years" name="years" type="text" class="feedback-input form__input _req" placeholder="">
</div>
<div class="form__left">
<label for="form__phone" data-i18n="car_phone"></label>
<input id="form__phone" name="phone" type="text" class="feedback-input form__input _req" placeholder="">
</div>
<div class="form__right">
<label for="form__city" data-i18n="car_city"></label>
<input id="form__city" name="city" type="text" class="feedback-input form__input _req" placeholder="">
</div>
<label for="form__defects" data-i18n="car_defects"></label>
<textarea id="form__defects" name="text" class="feedback-input" placeholder="Defektai"></textarea>
<div class="file__item">
<label for="formImage"></label>
<input id="formImage" accept=".jpg" type="file" name="image" class="file__input" multiple>
<div class="file__button" data-i18n="car_photos"></div>
</div>
<div id="formPreview"></div>
<input type="submit" id="submit.button" value="SIŪLYTI">
</form>
sendmail.php
<?php
if(trim(!empty($_POST['name']))){
$body.='<p><strong>Automobilio marke: </strong>'.$_POST['name'].'</p>';
}
if(trim(!empty($_POST['model']))) {
$body.='<p><strong>Model: </strong>' .$_POST['model'].'</p>';
}
if(trim(!empty($_POST['engine']))) {
$body.='<p><strong>Eng: </strong>' .$_POST['engine'].'</p>';
}
if(trim(!empty($_POST['transmission']))) {
$body.='<p><strong>Tran: </strong>' .$_POST['transmission'].'</p>';
}
if(trim(!empty($_POST['years']))) {
$body.='<p><strong>Year: </strong>' .$_POST['years'].'</p>';
}
if(trim(!empty($_POST['price']))) {
$body.='<p><strong>Price: </strong>' .$_POST['price'].'</p>';
}
if(trim(!empty($_POST['city']))) {
$body.='<p><strong>City: </strong>' .$_POST['city'].'</p>';
}
if(trim(!empty($_POST['phone']))) {
$body.='<p><strong>Phone:: </strong>' .$_POST['phone'].'</p>';
}
if(trim(!empty($_POST['text']))) {
$body.='<p><strong>Def: </strong>' .$_POST['text'].'</p>';
}
// ADD images
if (!empty($_FILES['image']['tmp_name'])) {
$filePath = __DIR__ . "/assets/images/" . $_FILES['image']['name'];
// Download file
if (copy($_FILES['image']['tmp_name'], $filePath)) {
$fileAttach = $filePath;
$body.='<p><strong>Nuotraukos: </strong>';
$mail->addAttachment($fileAttach);
}
}
$mail->Body = $body;
if (!$mail->send()) {
$message = 'Klaida';
} else {
$message = 'Issiusta!';
}
$response = ['message' => $message];
header('Content-Type: application/json');
echo json_encode($response);
?>
Ответы (1 шт):
Автор решения: Василий Музыка
→ Ссылка
в самом js скрипте изменить
formData.append('image',formImage.files[0]);
на:
formData.append('image',formImage.files);
В html где импут
<input id="formImage" accept=".jpg" type="file" name="image" class="file__input" multiple>
изменить на:
<input id="formImage" accept=".jpg" type="file" name="image[]" class="file__input" multiple>
Ну и в php обработать цыклом foreach
// ADD images
if (!empty($_FILES['image']['tmp_name'])) {
$filePath = __DIR__ . "/assets/images/" . $_FILES['image']['name'];
foreach ($_FILES["image"] as $image) {
// MIME type check
if($image['type'] == 'image/jpeg'){
// Download file
if (copy($_FILES['image']['tmp_name'], $filePath)) {
$fileAttach = $filePath;
$body.='<p><strong>Nuotraukos: </strong>';
$mail->addAttachment($fileAttach);
}
}
}
}