@maksim-mshp

Как реализовать загрузку файлов на сервер?

Здравствуйте. Мне нужно реализовать загрузку файлов на сервер.
У меня есть форма и PHP код.
<form action="upload.php" method="POST" enctype="multipart/form-data">
    <h1>Загрузите фото</h1>

    <input name="title" type="text" placeholder="Введите имя фото*" required>
    <textarea name="description" type="text" placeholder="Введите описание" ></textarea>
    <input name="userfile" type="file" placeholder="Выберите файл*" required>

    <button type="submit">Отправить</button>
</form>

<?php
    if( isset($_FILES['userfile']) ){
        $new_filename = 'images/' . $_FILES['userfile']['name'];
        move_uploaded_file($_FILES['userfile']['tmp_name'], $new_filename);
    }
?>


Если просто отправить эту форму, то произойдет редирект на upload.php.
Можно конечно добавить в PHP редирект обратно, но есть ли другие решения?

Использовать JQuery крайне нежелательно.
  • Вопрос задан
  • 109 просмотров
Решения вопроса 2
nokimaro
@nokimaro Куратор тега PHP
> PHP редирект обратно
нормальный вариант
Ответ написан
@zkrvndm
Веб-разработчик
Вы можете это легко сделать на чистом JavaScript. Пример кода конкретно для вашей формы:
<script type="text/javascript">

	// По готовности страницы, вешаем на форму обрабочтик onsubmit инлайново:
	document.addEventListener('DOMContentLoaded', function() {
		document.querySelector('form#FORM_ID').setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
	});

	// Фцнкция для отправки формы на чистом JavaScript:
	function form_send(form) {
		var url = form.getAttribute('action') + '?time=' + new Date().getTime();
		var xhr = new XMLHttpRequest(); xhr.open('POST', url);
		xhr.onreadystatechange = function() {
			if (xhr.readyState === XMLHttpRequest.DONE) {
				if (xhr.status === 200) {
					form.setAttribute('onsubmit', 'event.preventDefault();');
					form.innerHTML = xhr.responseText;
				}
				else {
					alert('При отправке формы произошла ошбика, детали смотрите в консоли.');
					console.log('При отправке формы произошла ошбика, ниже объект с деталями ошибки:');
					console.dir(xhr);
				}
			}
		}
		xhr.send(new FormData(form));
	}
  
</script>

Разместите этот html-код на странице с вашей формой и не забудьте заменить FORM_ID на ID вашей формы!

P. S. Кстати, есть еще один вариант, без использования JS - можно просто разместить вашу форму внутри iframe.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы