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

Question

[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 крайне нежелательно.

Comments

[Дмитрий]

Добрый день.

Использовать JQuery крайне нежелательно.

Почему?

[maksim-mshp]

Дмитрий, потому что весь проект написан без его использования, не хочу его подключать только ради этого.

[Дмитрий]

maksim-mshp, используйте чистый js, отправляйте файл через ajax.

[Rerurk]

Зачем ajax если чистый js, есть fetch

[Арслан Исаев]

Rerurk, потому что Ajax это все во лишь методология по клиент серверному взаимодействию. А как делать Ajax: fetch, xmlhttprequest или jQuery Ajax уже не важно

Answer 1

[nokimaro]

> PHP редирект обратно
нормальный вариант

Answer 2

[Надим]

Вы можете это легко сделать на чистом 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.

Comments

[Дмитрий Энтелис]

блин, ну iframe в 2020...

[Надим]

Дмитрий Энтелис, согласен, но если надо гарантировать работу абсолютно во всех возможных условиях, даже тогда, когда JS отключен, использование iframe вполне оправдано.