Почему JS скрипт мешает загрузить файл на сервер?

Question

[RoffDaniel]

Добрый день всем снова. И опять у меня проблемы с загрузкой файлов на сервер. Почему JS файл мешает проверке/загрузке файла на сервер?
У меня есть HTML форма, выглядит она вот так:

<section class="my-5">
    <form class="md-form" enctype="multipart/form-data" action="/engine/queryforms/postnews.php" method="post" id="NewsCreatorForm">
        <div class="row">
            <div class="col-lg-8">
                <div class="file-path-wrapper mb-4">
                    <div class="file-upload-wrapper">
                        <input type="file" name="imgnews" id="imgnews" class="file-upload">
                    </div>
                </div>
                <div class="card mb-4 post-title-panel">
                    <div class="card-body">
                        <div class="md-form mt-1 mb-0">
                            <input type="text" class="form-control" name="newstitle" id="newstitle">
                            <label class="form-check-label" for="newstitle">Тема новости</label>
                        </div>
                    </div>
                </div>
                <div class="card mb-4">
                    <textarea name="newscreator" id="newscreator" rows="10" cols="80"></textarea>
                </div>
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="md-form mb-0 mt-2">
                            <textarea type="text" class="md-textarea form-control" rows="3" name="script_text" id="script_text"></textarea>
                            <label class="form-check-label" for="script_text">Текст для скрипта</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-cascade narrower mb-5">
                    <div class="view view-cascade gradient-card-header ptadmin-color">
                        <h4 class="font-weight-500 mb-0">Информация</h4>
                    </div>
                    <div class="card-body card-body-cascade pt-3 pb-3 text-center">
                        <p><i class="fas fa-user mr-1" aria-hidden="true"></i> Автор: <strong>Pavel</strong></p>
                        <div class="text-center">
                            <button class="btn ptadmin-color white-text" type="submit" name="createnews">Опубликовать</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>

PHP обработчик формы:

<?php
require_once ('../../config.php');
$query = mysqli_connect(HOST, USER, PASS, DB);

$date = strtotime(date('Y-m-d H.i.s'));
$author = 'Pavel_Garson';
$attachment = $_FILES['imgnews']['name'];
$errorContainer = [];
$arrayFields = ['newstitle' => $_POST['newstitle'], 'newscreator' => $_POST['newscreator'], 'script_text' => $_POST['script_text'], 'imgnews' => $_POST['imgnews']];
if (empty($_FILES['imgnews']['tmp_name'])) {
    $errorContainer['imgnews'] = 'Is empty!'; // если пустой массив
} else {
    $errorContainer['imgnews'] = 'Not empty!'; // если массив не пустой
}


if(empty($errorContainer))
{
    echo json_encode(['result' => 'success']);
}
else
{
    echo json_encode(['result' => 'error', 'texterror' => $errorContainer]);
}

И JS обработчик:

$('#NewsCreatorForm').submit(function() {
        var newstitle = $('#newstitle').val();
        var newscreator = $('#newscreator').val();
        var script_text = $('#script_text').val();
        var imgnews = $('#imgnews').val();
// Но если я уберу этот код, все будет нормально работать... Знаю что проблема в JS, но не пойму какая...
        $.ajax({
            type: "POST",
            url: "/engine/queryforms/postnews.php",
            data: {
                'newstitle': newstitle,
                'newscreator': newscreator,
                'script_text': script_text,
                'imgnews': imgnews
            },
            dataType: "json",
            success: function(data)
            {
                if(data.result == 'success') {
                    $('#NewsCreatorSuccessModal').modal('show');
                    setTimeout(function(){document.location="/admin/news/"}, 1000);
                } else {
                    for(var errorField in data.texterror){
                        document.getElementById('errortext').innerHTML = data.texterror[errorField];
                        $('#NewsCreatorErrorModal').modal('show');
                    }
                }
            }
        });
        return false;
    });

В php обработчике у меня есть проврека на пустоту глобального массива $_FILES:

if (empty($_FILES['imgnews']['tmp_name'])) {
    $errorContainer['imgnews'] = 'Is empty!'; // если пустой массив
} else {
    $errorContainer['imgnews'] = 'Not empty!'; // если массив не пустой
}

И если форма проходит через PHP и JS обработку, то массив

$_FILES['imgnews']['tmp_name']

почему-то пустой(

Is empty!

). А если JS обратчик убрать то все нормально(

Not empty!

)

Если я непонятно объяснил, то вот видео: https://youtu.be/JAxynvOg7sA
Заранее, спасибо!

Answer 1

[dcode]

Используйте FormData для отправки данных. И processData и contentType в false.

$('#NewsCreatorForm').submit(function() {
	var formData = new FormData($(this)[0]);
	$.ajax({
		type: "POST",
		url: "/engine/queryforms/postnews.php",
		dataType: 'json',
		data: formData,
		processData: false,
		contentType: false,
		success: function(data)
		{
			if(data.result == 'success') {
				$('#NewsCreatorSuccessModal').modal('show');
				setTimeout(function(){document.location="/admin/news/"}, 1000);
			} else {
				for(var errorField in data.texterror){
					document.getElementById('errortext').innerHTML = data.texterror[errorField];
					$('#NewsCreatorErrorModal').modal('show');
				}
			}
		}
	});
	return false;
});

Comments

[RoffDaniel]

СПАИСБО!!!