Вот небольшой рефакторинг для лучшего структуририрования. Теперь понятнее, где можно вставить проверку действий пользователя. Одну проверку я поставил.
function upload_img(otvet) {
var input = document.getElementById('image-upload');
var new_img = document.getElementById('image-preview'); // загруженный img
// Функция для обработки загрузки файла
function handleFileUpload(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onloadend = function() {
new_img.src = reader.result;
};
reader.readAsDataURL(file);
}
// Добавляем обработчик события change для input
input.addEventListener('change', handleFileUpload);
// Функция для отправки файла на сервер
function sendFileToServer(formData) {
// Проверяем, что пользователь выбрал файл для загрузки
if (formData.get("file")) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/avatar.php", true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log("Файл успешно сохранен!");
// файл успешно записан, ставлю чек
var ch = document.getElementById('ch_img');
// чек
ch.checked = true;
} else {
console.log("Ошибка при сохранении файла.");
var ch = document.getElementById('ch_img');
ch.checked = false;
}
};
xhr.send(formData);
} else {
console.log("Файл не выбран для загрузки.");
}
}
// Функция для обработки события click на кнопке "Загрузить"
function handleClick() {
// Получаем файл из input
var file = input.files[0];
// Создаем объект FormData и добавляем файл
var formData = new FormData();
formData.append("file", file);
// Отправляем файл на сервер
sendFileToServer(formData);
}
// Добавляем обработчик события click для кнопки "Загрузить"
input.nextElementSibling.addEventListener('click', handleClick);
}