Как загрузить изображение на сервер через Ajax?

Question

[Константин Лавровский]

Добрый вечер.
Уже долго ломаю голову, не могу понять что делаю не так, так как сталкиваюсь в первый раз.
Разметка формы:

<form method="POST" id="redactorProduct" enctype="multipart/form-data">
	<label>
		<span>Название товара</span>
		<input type="text" name="product_name" id="product_name" class="req">
	</label>
	<label>
		<span>Фото</span>
		<input type="file" name="product_image_1" id="product_image_1">
	</label>
	<label>
		<span>Артикул</span>
		<input type="text" name="product_article" id="product_article" class="req">
	</label>
	<button>Добавить продукт</button>
</form>

Ajax обработка, скорее всего криво написал, но работает)

$('#redactorProduct button').click(function(event) {
		event.preventDefault();
		var data = $('#redactorProduct').serialize();
		var formData = new FormData();
		formData.append('file', $('#product_image_1').prop("files")[0]);
		console.log(formData);
		$.ajax({
			url: '/product-add.php',
			type: 'POST',
			dataType : 'text',
			processData: false,
			contentType: false,
			data: {data: data, formData: formData},
		})
		.done(function(last) {
			$('.all_product').append(last);
		});
	});

.done проходит, только значит ли это, что все данные отправились?
php - обработка

$product_name = $_POST['product_name'];
$product_article = $_POST['product_article'];

if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = './upload/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    $data = ["fileName"=>$name];
}else{
	echo 'Ошибка при загрузки страницы.';  // Выходит именно это, значит файл не грузится, но не понимаю где ошибка.
	exit();
}

$update = "INSERT INTO wp_buggyproduct (`product_name`, `product_article`, `product_maker`, `product_kit`, `product_description`, `product_cost`)
		   VALUES  ('$product_name', '$product_article', '$product_maker', '$product_kit', '$product_description', '$product_cost')
		  ";
$result = mysqli_query($link, $update);

Заранее спасибо за все комментарии, хочу совершенствовать код!

Answer 1

[Антон Шаманов]

не используй всякие там exit\die\редиректы где попало, потом сам же будешь мучаться с отладкой. если из москвы области могу книги подарить раз уж интернет тебе не доступен

Comments

[Константин Лавровский]

Тут же всего один exit и только для того, чтобы лишний раз в БД не вести запись

[Константин Лавровский]

В интернете всё перерыл, пересмотрел
Но как не старайся ничего не работает, хочу хоть тут понять попытаться

[Антон Шаманов]

Константин Лавровский, покажи что ты "перерыл" - попробую помочь

[Антон Шаманов]

Константин Лавровский, так все и начинается - один эксмит, 5 одинаковых строк вместо цикла, а потом ты уже на улице мумбаи и никто из белых программисто тебя не понимает

Answer 2

[Максим]

Уже давно пора переходить на более удобную библиотеку по работе с запросами из js - axios

<form id="my_special_form" enctype="multipart/form-data">
    <fieldset>
        <legend>Выберите файл</legend>
        <input required type="file" class="some-file" name="my_special_file">
    <input type="submit" value="Отправить файл"/>
</form>

<!-- подключаем axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        function uploadFile() {
            var formData = new FormData(document.forms.my_special_form);
            axios.post('/path_to_script.php', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(function (response) {
                let result = response.data;
                console.log(result); // тут будет готовый JSON объект. Нужно только в php результат отдать через echo json_encode(array);
            })
        }

        $('#my_special_form').on('submit', function (e) {
            e.preventDefault();
            uploadFile();
        })
    })	
</script>

На стороне скрипта php в массиве $_FILES ловите ваш отправленный файл my_special_file.