Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Загрузка изображений на сервер с пред просмотром, помогите подправить код

Николай Кондауров Ученик (92), на голосовании 5 месяцев назад
при отправке данных на сервер file = input.files[0] не получает бинари файл.
Голосование за лучший ответ
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (263840) 6 месяцев назад
Вот небольшой рефакторинг для лучшего структуририрования. Теперь понятнее, где можно вставить проверку действий пользователя. Одну проверку я поставил.
 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);
}
Николай КондауровУченик (92) 6 месяцев назад
Спасибо я пока ждал ответа, догадался сам как подправить, вот рабочий код мой. Цель какая я картинку либо что иное что под грузят вывожу в предварительный просмотр и сам файл копирую во временную папку, а там на сервере уже буду его проверять, вертеть, подгонять, если загружена не картинка то менять...
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (263840) Николай Кондауров, не разумно. Лучше провврить MIME-тип на клиенте: if (file.type.startsWith('image/'))
Похожие вопросы